需求:当弹出一个列表页数据,对其进行筛选选择。
列表更新,填充已选数据
代码如下:
<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、数据都已经加载完毕后执行下面代码
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]);
}
}
}
})
},
翻页时记录数据
上面代码实现了数据刷新后勾选已经选择的数据,但是当新选择数据后翻页,新选择的数据无法保存记录。
<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 表格分页记忆选中,分页切换 页面打勾不丢失