使用 npm

npm install pig-ui

使用 pnpm

pnpm install pig-ui

快速开始

• import { createApp } from 'vue';
• import App from './App.vue';
• import PigUi from '@lijiachong/pig-ui';
• import '@lijiachong/pig-ui/pig-ui.css'; // 引入样式
• const app = createApp(App);
• app.use(PigUi);
• app.mount('#app');

组件模块

• endTable 表格

组件使用案例

<template>
  <PigTabel
      ref="sysTable"
      :apis="apis"
      :filters="filters"
      :columns="columns"
      :actions="actions"
      @update:pagination="handlePagination"
    >
      <template #radio-group>插槽</template>
    </PigTabel>
</template>
<script>
    /**
     * 表格数据接口
     * @param {object} params 请求参数
     * data: 表格数据
     * count: 总条数
    */
    apis:{
        refresh:async (params) => {
            return {data:[],count:0}
        }
    }

    /**
     * 表格筛选条件
     * @param {object} params 请求参数
     * data: 表格数据
     * count: 总条数
    */
    const filters = ref([
      {
        label: "系统（平台）名称",
        type: "input",
        prop: "system_name",
      },
      {
        label: "所属单位/处室",
        type: "cascader",
        prop: "belonging_department",
        // value: [],
        extends: {
          props: {
            lazy: true,
            checkStrictly: true,
            lazyLoad(node, resolve) {
              const { level } = node;
              let children = [];
              if (level === 0) {
                children = [
                  { value: "group1", label: "一级部门", leaf: false }, // leaf: false 表示可展开
                  { value: "group2", label: "二级部门", leaf: false },
                ];
              } else if (level === 1) {
                children = [
                  { value: "sub1", label: "子部门1", leaf: true }, // leaf: true 表示无子级
                  { value: "sub2", label: "子部门2", leaf: true },
                ];
              }
    
              resolve(children);
            },
          },
        },
        clearable: true,
      },
    ]);

    /**
     * 表格列配置
     * @param {object} params 请求参数
     * data: 表格数据
     * count: 总条数
    */
    const columns = [
        { label: "序号", type: "selection", width: 55, align: "center" },
        { label: "系统（平台）名称", prop: "system_name" },
        { label: "所属单位", prop: "department" },
        { label: "所属处室", prop: "belonging_department" },
        { label: "操作", type: "operation", width: 120, align: "center" },
    ];

    /**
     * 操作按钮配置
     * @param {object} params 请求参数
     * data: 表格数据
     * count: 总条数
    */
    const actions = [
          {
            key: "derive",
            title: "导出",
            isHeader: true,
            event: () => {
              console.log("导出");
            },
          }
          {
            title: "删除",
            key: "delete",
            type: "danger",
            event: (row) => {
              console.log("删除", row);
            },
          },
    ];

    //暴露给父组件table组件全选
    defineExpose({getSelectedRows: () => selectedRows.value });
</script>

|参数|类型|默认值|说明| |--|--|--|--| |apis|Object|{}|表格数据接口| |filters|Array|[]|筛选条件配置| |columns|Array|[]|表格列配置| |actions|Array|[]|操作按钮配置|

|插槽名|插槽名| |--|--| |radio-group|自定义|