element-UI表格多选，翻页记住之前的选项以及弹窗回显默认选中

最近有个需求，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);
        });
    });
}

如果有问题，欢迎交流~！