打开dialog会把table选中项清除，已解决

打开dialog会把table选中项清除

表格部分代码：

<el-table
    ref="multipleTable"
    :data="
      tableList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    "
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
    :key="Math.random()"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      type="selection"
      width="50"
      align="center"
    ></el-table-column>
    <template v-for="item in tableTitle">
      <el-table-column
        :label="item.label"
        :key="item.prop"
        :prop="item.prop"
        min-width="90px"
        align="center"
      ></el-table-column>
    </template>
  </el-table>

问题：批量删除对话框打开时，表格中的选中项清空，调用了table组件的@selection-change="handleSelectionChange"方法。

 

   

原因：前端分页tableList.slice((currentPage - 1) * pageSize, currentPage * pageSize)该方法导致的，表格的data直接绑定tableList没有此问题。动态表格数据分页会触发选择项改变，所以会清空选中数据（为什么会触发，目前没有找到原因）。

解决：既然动态分页数据会导致这个问题，那我们就监听数据变化，在数据变动以后再分页。

1.表格数据关联新的变量tableData；

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
    :key="Math.random()"
    :row-class-name="tableRowClassName"
  >
  </el-table>

2.监听表格数据变化，截取当前页数据；

watch: {
    tableList: {
      handler(a) {
        this.tableList = a;
        this.tableData = this.tableList.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
        this.timeStamp = new Date();
        console.log("监听监听======", a);
      },
      deep: true
    },
}

3.分页组件选择页码和展示条数时再截取数据。

 <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    align="right">
  </el-pagination>
  
  methods中
  // 每页显示几条
    handleSizeChange(val) {
      this.pageSize = val;
      this.tableData = this.tableList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 选择页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableData = this.tableList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }

效果：

     

前端分页，批量删除打开对话框完美实现，代码大家可以按自己的需求封装一下哈。