需求：使用ElementUI的el-table组件，列表可以进行多选，并且翻页后选中的行状态仍然保留
一、解决思路：
1、在el-table中设置 :row-key=“getRowKeys”
2、在type为selection的el-table-column中添加:reserve-selection=“true”
3、在js的methods中加getRowKeys方法，即可实现table翻页及搜索查询后仍保持之前的选中状态
二、代码具体实现
1、html
<el-table :data="tableData" ref="multipleTable" :row-key="getRowKeys" @selection-change="handleSelectionChange">
<el-table-column width="48" type="selection" :reserve-selection="true"></el-table-column>
<el-table-column label="序号" width="50" align="center">
<template slot-scope="scope">{
{ (pageCurrent - 1) * pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="300" :show-overflow-tooltip="true" align="left" />
</el-table>
2、js
export default{
data(){
return {
tableData: [],
pageCurrent: 1,
pageSize: 10,
total: 0，
select: []
}
}
methods:{
// 1、获取列表数据
async getStep2TableData(){
const {
code, data} = await companyList({
pageCurrent: pageCurrent,
pageSize: pageSize,
})
this.tableData = data.list
this.total = data.totalCount
this.setCheckedRows() //回显已勾选的数据
},
// 2、设置row-key
getRowKeys(row){
return row.id
},
// 3、勾选列表操作
handleSelectionChange(selection){
this.select = selection.map( (item) => item.id)
},
// 4、回显已勾选的数据
setCheckedRows(){
let selectItem = []
this.tableData.forEach(item => {
this.select.forEach(id => {
if(item.id === id){
selectItem.push(item)
}
})
})
this.$refs.multipleTable.toggleRowSelection(item);
}
}
}