1,在table中指定row-key,设置一个ref(用来清除选中状态)
<el-table
v-loading="loading"
:data="typeList"
@selection-change="handleSelectionChange"
:row-style="{ height: '30px' }"
:cell-style="{ padding: '0px' }"
height="493"
:row-key="
(row) => {
return row.dictId;
}
"
ref="multipleTable"
>
注意 row-key 必须是唯一值,一般指定为数据的 id
2,在select多选框中开启reserve-selection属性
<el-table-column
type="selection"
:reserve-selection="true" //开启属性
width="55"
align="center"
/>
这样就可以实现翻页的时候保持选中状态实现多选了,是不是很简单?
但是此时选中的数据不会因为再次请求数据而取消选中。
加上这句代码,用来清除所有选中状态:
// 清空所有选中状态:
this.$refs.multipleTable.clearSelection();