0


el-table select 多选框如何实现选中数据回显

现象描述:
将用户勾选的内容添加到表格,当页面还未关闭时,选项还是正常勾选,但是只要退出该页面,再进来就会发现勾选被取消了

需求描述:
已选择项默认勾选,且表格内容更改,勾选项也同步更改

<el-table :data="testItemList" ref="testItemLists":header-cell-style="{ background: '#f4f3f9', color: '#606266' }"  @selection-change="handleTestItem"><el-table-column prop="is_selected" type="selection" width="55" label="全选"></el-table-column><el-table-column type="index" label="序号":index="(index) => { return (index + 1) }"></el-table-column><el-table-column prop="kind_name" label="名称"></el-table-column></el-table>toggleSelectionItem(){// 在获取testItemList后 执行该函数let match_ids =this.testItemList.map(item=> item._id);// 获取选择项let testItemInfo =this.testItemInfo ||[];// 获取所有项let match_row = testItemInfo.filter(item=>{return match_ids.indexOf(item._id)!=-1})this.$nextTick(()=>{this.$refs.testItemLists.clearSelection();
    match_row.forEach(row=>{this.$refs.testItemLists.toggleRowSelection(row);})})},

效果如下:
在这里插入图片描述


本文转载自: https://blog.csdn.net/qq_30258721/article/details/127920129
版权归原作者 攻城狮炭烤策划 所有, 如有侵权,请联系我们删除。

“el-table select 多选框如何实现选中数据回显”的评论:

还没有评论