vue+elementUI表格组件（支持多选、分页、选中回显、搜索、增删改查）

本组件能实现表格多选，分页，分页选中回显，新建、删除、修改、查询。

思路要点

将组件的操作产生的参数全部返回父组件，由父组件处理接口数据的交互
这样就可以提高表格组件的多样性，提高耦合程度，和高复用性，不必因为接口处理方式不同而重新编写组件

父组件
模板代码，主要是用tableData传输数据，其他@方法来接收参数

引入组件

import checkboxTable from '@/components/common/checkboxTable'

数据结构和引用组件

components: {
      checkboxTable
      //引用组件
    },
    data: () => ({
      //向table传值
      tableData: {
        //是否显示组件
        isShow: true,
        //是否显示新建弹框
        dialogTableVisible: false,
        //表格行项目列表和总条目数
        lineItems: {
          items: [],
          totalCount: 0,
        },
        //表格头部信息
        table: {
          header: {},
        },
        //存放搜索的key数组
        search: [],
        //分页器
        fenye: {
          pageIndex: 1,
          pageSize: 10,
        },
      },
    }),

将接收的数据进行处理，然后传入表格组件

   //处理表格数据
      dealTableData(obj) {
        //赋值列表
        this.tableData.lineItems = obj;
        //创建表头名称
        this.tableData.table.header = {
          "name": "姓名", "sex": "性别", "age": "年龄",
        };
        //搜索条件的key
        this.tableData.search = [
          {name: "姓名", id: "name", value: ""},
          {name: "年龄", id: "age", value: ""}];
      },

接收表格组件参数的示例函数，具体情况要根据后台接口来写

     //新建条目
      createInfor(details) {
        this.$post("新建接口", details, {
          emulateJSON: true
        }).then((response) => {
          if (response.code === 'success') {
            this.$message({message: '创建成功', type: 'success'});
            //请求成功后将弹窗关闭
            this.tableData.dialogTableVisible = false;
            //重新请求列表接口，刷新数据
            this.getTableData();
          } else {
            this.$message({message: '创建失败', type: 'warning'});
          }
        }, err => {
          console.log(err);
        });
      },
      //请求基础表格数据
      getTableData(msg) {
        this.$post("表格列表接口", {
          "page": this.tableData.fenye.pageIndex,
          "rows": this.tableData.fenye.pageSize
        }).then((response) => {
          console.log(response)
          if (response.code === 'success') {
            this.$message({message: response.msg, type: 'success'});
            //将数据传入处理函数
            this.dealTableData(response.data)
            return
          } else {
            this.$message({message: response.msg, type: 'warning'});
          }
        }, err => {
          console.log(err);
        });
      },

表格组件

分页页码回显的时候，有时候不会重新渲染，所以要在分页器上加个v-if强制重新渲染
uuid这个插件，视项目情况引用

完整插件git地址
https://github.com/zccone/-plug-in-checkBoxTable