欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

element 跨页全选row-key

程序员文章站 2022-07-14 09:25:57
...

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。
  1. 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把所有事情都帮你做好了。