el-table加分页后多选翻页和查询后仍保持选中状态及回显

需求：使用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(selectItem);	
		}
	}
}