element table表格多选框默认选中回显,并在查询和分页时保留之前的选择

首先,先默认选中

element table表格多选框默认选中回显,并在查询和分页时保留之前的选择_第1张图片

根据官方文档  通过 

this.$refs.multipleTable.toggleRowSelection(item2,true);

默认选中item2为列表list的某一个list [ i ]

例如:

element table表格多选框默认选中回显,并在查询和分页时保留之前的选择_第2张图片

然后就可以默认回显了。


 清空

点开其他查看回显时清空,弹框弹出时清空,执行以下方法

this.$nextTick(() => {
      this.$refs.multipleTable.clearSelection(); 
});

其次,点击搜索或分页时,第一页回显就没有了,这时候给选择框标签加一个属性

:reserve-selection="true",如第一个图所示

通过row-key属性在数据更新之后保留之前选中的数据。


效果图如下:

element table表格多选框默认选中回显,并在查询和分页时保留之前的选择_第3张图片

你可能感兴趣的:(vue,element)