GeneralBasicTable

一个兼容Vue2和Vue3的表格组件 示例:

<GeneralBasicTable
    size="mini"
    :getList="getList"
    :tableColumn="tableColumn"
    :tableList="tableList"
    :total="total"
    noUrlParameters // 不接受和不改变url的参数
    border
    :style="{ width: '98%', marginBottom: 10 + 'px' }"
    ref="generalBasicTable"
    @selection-change="handleSelectionChange" // 传入选择框以后的回调函数，传出一个val参数
    @row-dblclick="addModel" // 行双击后的回调函数，传出row, column, event参数
>
 frontSlot插槽放在前面，默认在后面
 <template v-slot:frontSlot>
    <el-table-column type="selection" width="55"> </el-table-column>
  </template>
    ...一些传入插槽的内容
</GeneralBasicTable>

支持所有element-plus element-ui Table 表格的原生属性

数据示例:

tableList: [
    {
      base: "inch",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
  ], //表格内容


  tableColumn: [
    {
      key: "date",
      prop: "date",
      label: "日期",
      align: "center",
    },
    {
      key: "name",
      prop: "name",
      label: "名字",
    },
    {
      key: "address",
      prop: "address",
      label: "地址",
      render: (scope) => {
        const { $index, row = {} } = scope;
        const { address } = row;
        // jsx语法依赖@vue/babel-plugin-jsx或@vitejs/plugin-vue-jsx，可能需要用到tsx文件（Vue3）
        // 详见https://github.com/vuejs/babel-plugin-jsx，https://cn.vitejs.dev/plugins/
        let ele = <div>{address}</div>;
        return ele;
      },
    },
  ],
multipleSelection: [], //表格选中项
total:0,

methods示例：

async getList(
  params = {
    page: Number(this.$route.query.page) || 1,
    limit: Number(this.$route.query.limit) || 10,
  }
) {}

handleSelectionChange(val) {
  this.multipleSelection = val;
},

table提供ref调用：

this.$refs["generalBasicTable"].$refs["queryTableRef"]    

安装：npm i general-basic-table install: npm i general-basic-table