vue+ElementUI 表格多选框翻页后记住选中数据

最新推荐文章于 2023-04-17 11:08:42 发布

春风姐姐

最新推荐文章于 2023-04-17 11:08:42 发布

阅读量850

点赞数

原文链接：https://blog.csdn.net/qq_43225030/article/details/108357416

版权

使用vue+ElementUI 的el-table表格时，如果需要使用多选框选择多条数据，翻页后一般会重新请求后台，之前选择的数据就会丢失
解决办法：
在type="selection"的选择列上添加reserve-selection属性，值为true
还要在table的每一行数据上指定一个唯一的key值

<!--把已选择的数据用标签显示出来---->
<el-tag
    v-for="(tag,index) in selectedList"
    :key="index"
    closable
    size="small"
    class="tag-item"
    @close="closeTag(tag)"
  >{{tag.name}}</el-tag>
  
  
<el-table
	ref="tableRef"
    :data="dataList"
    :row-key="getRowKey"
    @selection-change="handleSelectionChange"
  >
     <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
     <el-table-column prop="id" label="ID"></el-table-column>
     <el-table-column prop="name" label="名称"></el-table-column>
</el-table>

handleSelectionChange(val){
   console.log(val)
   this.selectedList = val
},
getRowKey(row){
    return row.id;
},
// 通过标签的关闭来实现数据多选框的取消
closeTag(data) {
  let index = this.getIndexById(data.id);
  this.$refs.tableRef.toggleRowSelection(
    this.dataList[index]
  );
},
getIndexById(id) {
  let index;
  for (let i = 0; i < this.dataList.length; i++) {
    if (id === this.dataList[i].id) {
      index = i;
      break;
    }
  }
  return index;
}