element 跨页全选row-key
程序员文章站
2022-07-14 09:25:57
...
element 跨页全选
核心:
- 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。
- 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把所有事情都帮你做好了。