最近有个需求，element-ui表格多选，翻页的时候选中的选项不会被清空。
我用的element-ui版本是：2.8.2
下面是关键代码，模拟数据和分页根据自己需求加
<el-table :data="productList"
ref="multipleTable"
:row-key="getRowKeys"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="60" align="center">
</el-table-column>
<el-table-column label="基金名称" width="200" prop='fund_name'>
</el-table-column>
</el-table>
export default {
data() {
return {
productList: [],
selectList: [],
getRowKeys (row) {
return row.fund_id // fund_id是唯一标识
},
}
},
methods: {
// 选项发生变化时触发
handleSelectionChange (val) {
// val代表整个表格选中的行数据
this.selectList = val
console.info(val)
// console.info(val.map(item => item.fund_id)) // 打印出选中行的fund_id集合
}
}
}
关键：
1、设置column的type为selection ,设置属性:reserve-selection="true"
2.table加上属性:row-key,row-key必须唯一
3.如果请求完接口想清空表格所选：
this.$refs.multipleTable.clearSelection()
有一个问题，点击全选的时候，只能全选当前页。
————————————————
版权声明：本文为CSDN博主「MISS_CJL」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MISS_CJL/article/details/102601750
