element table跨分页多选及回显的实现示例

1.data中定义getRowKeys，记录每行的key值

getRowKeys(row) { return row.id;},

2.el-table绑定getRowKeys

<el-table  :data="tableData"  @selection-change="handleSelectionChange"  :row-key="getRowKeys">

3.将selection列的reserve-selection设为true

<el-table-column  type="selection"  width="50"  align="center"www.easck.com  :reserve-selection="true"></el-table-column>

4.表格数据选中方法handleSelectionChange

handleSelectionChange(rows) {  this.multipleSelection = rows;  this.select_number = this.multipleSelection.length;  this.select_Id = [];  if (rows) {    rows.forEach((row) => {     if (row) {      this.select_Id.push(row.id);     }    });  }},

代码整理

<template> <div>  <el-table @selection-change="handleSewww.easck.comlectionChange" :row-key="getRowKeys">   <el-table-column type="selection" width="50" align="center" :reserve-selection="true">   </el-table-column>  </el-table>  <el-pagination>...</el-pagination> </div></template><script>export default { data() {  return {   multipleSelection: [], // 表格选中   getRowKeys(row) {//记录每行的key值    return row.id;   },   select_number: "", //表格select选中的条数   select_Id: [], //表格select复选框选中的id  } }, methods: {  handleSelectionChange(rows) {   this.multipleSelection = rows;   this.select_number = this.multipleSelection.length;   this.select_Id = [];   if (rows) {    rows.forEach((row) => {     if (row) {      this.select_Id.push(row.id);     }    });   }  }, }}