最近有个需求，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 = valthis.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 = trueconst keys = this.idsconst rows = this.selectList.filter((row) => {return keys.includes(row.fund_id);});let that = thisthat.$nextTick(function () {that.$refs.multipleTable.clearSelection()rows.forEach((row) => {that.$refs.multipleTable.toggleRowSelection(row, true);});});}
如果有问题，欢迎交流~！
