解决 Element UI 分页表格中取消选中项不更新的问题

问题背景

在使用 Element UI 的分页表格时，我遇到了一个问题。具体情况如下：

1. 在表格的第一页全选，切换到第二页再全选，然后回到第一页。
2. 点击按钮取消第一页和第二页不需要的勾选项。

初始实现

// 处理选中项变化
handleSelectionChange(val) {
    this.selectedPeraonal = val || [];
}

// 处理在线反馈
onlineFeedBack() {
    const selectedPeraonal = this.selectedPeraonal.filter(item => !errId.includes(item['welfare_id']));
    this.$refs['generalTable'].$refs.generalTable.clearSelection();
    this.$nextTick(() => {
        selectedPeraonal.forEach(item => {
            this.$refs['generalTable'].$refs.generalTable.toggleRowSelection(item, true);
        });
        this.loadingOnLineFeed = false;
    });
}

但是，页面未生效。

问题分析

了解到 `toggleRowSelection` 方法中传入的 item 必须是当前表格中的数据才能生效。因此，经过 `filter` 之后的数据不再属于当前表格的数据。

优化思路

由于 `toggleRowSelection` 需要操作当前表格的数据，我们需要在取消选中项时，直接操作当前表格的数据。

优化后的代码如下：

this.$nextTick(() => {
    // 遍历已选中的项，取消不需要的选中
    this.selectedPeraonal.forEach(item => {
        if (errId.includes(item['welfare_id'])) {
            this.$refs['generalTable'].$refs.generalTable.toggleRowSelection(item, false);
        }
    });
    this.loadingOnLineFeed = false;
});

总结

注意当前操作的数据是否是表格的原数据！！

通过直接操作当前表格的数据并取消不需要的选中项，优化了分页情况下的选中状态处理问题。