最近有个需求,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: [],
ids: [],
getRowKeys (row) {
return row.fund_id // fund_id是唯一标识
},
}
},
methods: {
// 选项发生变化时触发
handleSelectionChange (val) {
// val代表整个表格选中的行数据
this.selectList = val
this.ids = val.map(item => item.fund_id)
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()
有一个问题,点击全选的时候,只能全选当前页。
补充下在弹窗中回显的时候表格要默认选中的时候该怎么写:
// 打开弹窗
toOPenDialog(){{
this.visible = true
const keys = this.ids
const rows = this.selectList.filter((row) => {
return keys.includes(row.fund_id);
});
let that = this
that.$nextTick(function () {
that.$refs.multipleTable.clearSelection()
rows.forEach((row) => {
that.$refs.multipleTable.toggleRowSelection(row, true);
});
});
}
如果有问题,欢迎交流~!