列表更新，填充已选数据
<el-table v-loading="loading" :data="drugList" @selection-change="handleSelectionChange" ref="drugTable"
></el-table>
/** 查询列表数据 */
getList() {
this.loading = true;
listDrug(this.queryParams).then(response => {
this.drugList = response.rows;
this.total = response.total;
this.loading = false;
this.initTable();
});
},
initTable(){
//$nextTick 保证dom、数据都已经加载完毕后执行下面代码 issDrug 选中的数组
this.$nextTick(()=>{
for (let i = 0; i < this.drugList.length; i++) {
for (let j = 0; j <this.idsDrug.length; j++) {
//两个数组做比对,选中的做勾选
if(this.drugList[i].id===this.idsDrug[j].id)
{
this.$refs.drugTable.toggleRowSelection(this.drugList[i]);
}
}
}
})
},
翻页时记录数据
上面代码实现了数据刷新后勾选已经选择的数据，但是当新选择数据后翻页，新选择的数据无法保存记录。
row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve–selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
reserve-selection·:仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row–key），该属性默认值为false
知道这些了，同时你还需要toggleRowSelection和clearSelection两个属性。
<el-table v-loading="loading" :data="drugList" @selection-change="handleSelectionChange" ref="drugTable"
:row-key="rowKey"
>
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
</el-table>
一定要更新这句代码 加上 true
this.$refs.drugTable.toggleRowSelection(this.drugList[i],true);
参考文章
Vue elementui 实现表格selection的默认勾选
Vue + Element UI 表格分页记忆选中，分页切换 页面打勾不丢失
原文地址:https://blog.csdn.net/w710537643/article/details/132376806
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_34922.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
