element 跨页全选row-key

element 跨页全选

核心：

1. vue

<el-table ref="multipleTable" :row-key="getRowKeys" @selection-change="handleSelectionChange"
    :data="tableData.Data" style="width: 100%" :max-height="550">
  <el-table-column type="selection" width="55" align="center" :reserve-selection="true" fixed="left">el-table-column>              

el-table   :row-key="getRowKeys"
el-table-column   :reserve-selection="true" 

有了上面两个属性，页面会自动记录所有你选中的数据。
注意：element组件  el-table。

2. js

methods: {
     
    // 确定唯一的key值
    getRowKeys(row) {
     
      return row.individualId // 每条数据的唯一识别值
    },
    // 分页
    handleSizeChange(size){
     
        this.pageSize=size
        this.getTableList() // 获取表格数据的方法，后台分页
    },
    hadleCurrentChange(page){
     
        this.currentPage=page
        this.getTableList()
    }
}

注意：每次请求数据的时候，不要去清空选择。
注意：在分页组件中，只需要关注pageSize和currentPage，把当前值赋值给data中的对应参数即可，然后请求一次数据。

网上找了好多资料，很复杂，对选中的数据进行去重、筛选、反选等，没有必要，你只要确定一件事：row-key的值是每条数据的唯一标识即可，element把所有事情都帮你做好了。