el-dialog中使用el-table的多选回显、分页切换选中状态

项目场景：

vue3+element-plus
使用场景如下：

---

问题描述

每次打开和切换弹窗el-table的分页时无法同步选中状态

el-dialog中使用el-table呈现多条数据，且可多选，初始化选中的数据需要深拷贝，否则选中之后触发父组件事件时会陷入死循环，深拷贝导致el-table中已选中的数据无法记录，因此每次el-dialog显示和更新el-table数据时都需要手动更新选中状态.

---

解决方案：

给el-talbe的row-key设置唯一值，设置selection和reserveSelection为true,el-dialog显示和刷新el-table数据时手动更新选中状态,关闭el-dialog时清空选中状态。

注意：重要方法 refreshCurrentPageRowSelection 、 handleRowSelect、handleSelectAll。

主要代码如下：

 <base-table
        ref="tableRef"
        :head="tableHead"
        row-key="uniqueVerification"
        :data="data"
        :page="pages"
        :stripe="false"
        :load="loading"
        :tableHeight="tableHeight"
        :selection="true"
        :reserveSelection="true"
        @page-change="(page) => handleQueryAsync(page)"
        @reload="handleQueryAsync"
        @select="handleRowSelect"
        @select-all="handleSelectAll"
        @row-click="handleRowClick"
    >
    //...
    </base-table>

const $emits = defineEmits(['update:visible', 'submit']);
const $props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    selected: {
        type: Array,
        default: () => [],
    },
});
const dialogVisible = toRef($props.visible);

const selectedList = ref([]);

const handleRowSelect = (val) => {
    selectedList.value = val;
};
const handleSelectAll = (val) => {
    selectedList.value = val;
};
// uniqueVerification 为唯一key值
const handleRowClick = (row) => {
    const index = selectedList.value.findIndex(
        (item) => item.uniqueVerification === row.uniqueVerification
    );
    index > -1 ? selectedList.value.splice(index, 1) : selectedList.value.push(row);
    tableRef.value.toggleRowSelection(row, index > -1 ? false : true);
};
// 刷新当前页选中状态
const refreshCurrentPageRowSelection = (data) => {
    nextTick(() => {
        const checkedCodeArr = selectedList.value.map((item) => item.uniqueVerification);
        data.forEach((item) => {
            if (!checkedCodeArr.includes(item.uniqueVerification)) {
                tableRef.value.toggleRowSelection(item, false);
            } else {
                tableRef.value.toggleRowSelection(item, true);
            }
        });
    });
};
watch(
    () => [$props.visible],
    ([val]) => {
        dialogVisible.value = val;
        if (val) {
            selectedList.value = deepClone($props.selected);
            refreshCurrentPageRowSelection(data.value);
        } else {
            tableRef.value.clearSelection();
            selectedList.value = [];
        }
    }
);
// 获取当前页的数据
const handleQueryAsync = async (page) => {
   // ...
    if (dialogVisible.value) {
        refreshCurrentPageRowSelection(data.value);
    }
};
const hand
leClickCancel = () => {
    $emits('update:visible', false);
};
const handleClickConfirm = () => {
    $emits('submit', selectedList.value);
    handleClickCancel();
};