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

本文主要是介绍vue+ElementUI 表格多选框翻页后记住选中数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<!--把已选择的数据用标签显示出来---->
<el-tagv-for="(tag,index) in selectedList":key="index"closablesize="small"class="tag-item"@close="closeTag(tag)">{{tag.name}}</el-tag><el-tableref="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;
}

这篇关于vue+ElementUI 表格多选框翻页后记住选中数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---