使用el-table组件加上分页后,多选翻页和查询后仍保持选中状态及回显.实现表格翻页和查询后仍保持选中状态
一,实现表格翻页和查询后仍保持选中状态
在el-table中加 :row-key=“getRowKeys”,在type为selection的el-table-column中添加:reserve-selection=“true”,在js的methods中加getRowKeys方法,即可实现table翻页及搜索查询后仍保持之前的选中状态;
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
size="mini"
stripe
height="560px"
@row-click="handleClickTableRow"
@selection-change="handleSelectionChange"
:row-key="getRowKeys"
>
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
js:
getRowKeys(row) {
return row.id;
},
二,实现表格多页面选中状态回显
使用el-table中的toggleRowSelection方法来实现回显功能
data(){
return{
tableData:[],//table数据
selectListData:[],//需要回显的数据id数组
}
}
获取需要回显的数据后使用toggleRowSelection方法实现回显
this.$nextTick(() => {
this.tableData.forEach((row) => {
if (this.selectListData.indexOf(row.id) >= 0) {
this.$refs.multipleTable.toggleRowSelection(row, true)
}
})
})