vue 基于el-table实现多页多选/单选、翻页回显过程

 1、问题：表格可以多选/单选  分页的时候 表格数据能进行回显

 type="selection"可以设置表格进行多选 row-key 指定数据的 Key，用来优化 Table 的渲染

@select单选的事件 @select-all多选的事件 这两个事件用于多选使用

@selection-change="handleSelectionChange"这一个事件 是单选使用的 二选一

2.能实现的效果 一.表格多选 和 表格多选进行回显 二.表格单选 和 表格单选进行回显

        


  data() {
    return {
      tableData: [], 
      selectExportId: [], // 多选表格的id
}
methods:{
  getRowKeys(row) {
      return row.id;
    },
// 这两个事件 注意 @select="handleCheckBox"  @select-all="handleSelectAll"
    // 单个选中 方法 多选单选都是这个 
    handleCheckBox(rows, row) {
      if (this.selectExportId.find((i) => i === row.id)) {
        this.selectExportId = this.selectExportId.filter((i) => i != row.id);
      } else {
        this.selectExportId.push(row.id);
      }
    },
    // 全选方法
    handleSelectAll(rows) {
      if (rows.length) {
        rows.forEach((row) => {
          if (!this.selectExportId.find((item) => item == row.id)) {
            this.selectExportId.push(row.id);
          }
        });
      } else {
        this.tableData.forEach((row) => {
          this.selectExportId = this.selectExportId.filter(
            (item) => item != row.id
          );
        });
      }
    },
     // 请求方法
   getTableData(){
      请求接口.then(res=>{
          const { rows, total, pageNum } = res.data;
          this.tableData = rows;
          this.total = total;
          this.pages.pageNum = pageNum;
          this.loading = false;
          this.$nextTick(() => {

           //  选中的表格 多选 回显的方法 根据id进行回显的
            this.tableData.forEach((item, index) => {
              if (this.selectExportId.findIndex((i) => i === item.id) >= 0) {
                this.$refs.typeTable.toggleRowSelection(
                  this.$refs.typeTable.data[index],
                  true
                );
              }

          //  选中的表格行 单选 回显的方法 两个留一个 看需求
           const index = this.tableData.findIndex(
              (i) => i.id === this.selectExportId
            );
            if (index >= 0) {
              this.$refs.typeTable.toggleRowSelection(
                this.$refs.typeTable.data[index],
                true
              );
            }

            });
          });
   })
  },
// 单选的选中事件 如果单选的话 把下面的样式也写上 隐藏表头全选
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.typeTable.clearSelection();
        this.$refs.typeTable.toggleRowSelection(selection.pop());
      } else if (selection.length === 1) {
        this.selectExportId = selection[0].id;
      }
    },
}
// 将表头全选按钮 进行隐藏 不让全选