element 表格根据后端数据配置多选框回显 并解决分页勾选回显

1.表格头部添加 ref :row-key @selection-change

 <el-table border stripe :data="tablelist.slice((currentPage-1)*pageSize,currentPage*pageSize)" v-loading="loading"     
  @selection-change="handleSelectionChange"
  ref="multipleTable"
  :row-key="rowKey">

2.多选框列开启 :reserve-selection=“true”

   <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />

3. rowKey 设置返回数据唯一标识 必须是唯一标识

  rowKey(row) {
      return row.id
    },

4. 拿到后端数据后 遍历每条数据 根据回显条件 找出需要回显的每条数据 通过ref 挂载上

 if (tablelist.length > 0) { //this.tablelist = 后端数据
     tablelist.forEach(row => { 
         if (row.saved === true) { // 根据条件找出需要回显的数据 根据自己后端的条件来写 一般都是布尔值
                this.$refs.multipleTable.toggleRowSelection(row);
          }
      });
 }

5. @selection-change=“handleSelectionChange” 获取勾选的所有数据

  // 多选
    handleSelectionChange(rows) {
      this.selectlist = rows // 
    },