如何在 Element Plus Table 的数据更新后保持选择状态？

在 Element Plus 的 Table 组件中，为了在数据更新后保持用户的选择状态，你需要在数据变化时手动同步选择的状态。这里有一个基本的示例，展示如何使用 Vue 的响应式特性以及事件监听来实现这个功能：

首先，在模板中添加一个 `ref` 来引用表格组件，并监听其 `@selection-change` 事件：

<template>
  <el-table ref="table" :data="tableData" :row-key="getRowKey" v-model="selectedRows">
    <!-- 其他列配置 -->
    <el-table-column type="selection" @selection-change="handleSelectionChange"></el-table-column>
  </el-table>
</template>

然后，在你的 Vue 实例中，创建一个 `selectedRows` 数据属性，并在 `handleSelectionChange` 方法中处理选择更改：

<script>
import { ref } from 'vue';

export default {
  setup(props, context) {
    const tableRef = ref(null); // 引用表格组件
    const tableData = ...; // 表格数据
    const selectedRows = ref([]);

    // 初始化时设置默认的选中行
    tableRef.value && tableRef.value.setCurrentRow(selectedRows.value);

    function handleSelectionChange(rows) {
      // 更新 selectedRows 的值，并可能需要在原始数据中查找对应行
      rows.forEach((row) => {
        const index = tableData.findIndex((item) => item.id === row.id); // 假设这里有 id 作为唯一标识
        if (index !== -1) {
          context.emit('update:selectedRows', [tableData[index]]); // 使用 $emit 触发更新
        }
      });
    }

    // 以下是在数据更新时触发选择状态同步
    watch(() => tableData, () => {
      if (tableRef.value) {
        // 当数据更新时，遍历新的数据并尝试找到先前选中的行
        selectedRows.value.forEach((selectedRow) => {
          const newRow = tableData.find(item => item.id === selectedRow.id);
          if (newRow) {
            tableRef.value.select(newRow);
          }
        });
      }
    });

    return {
      tableData,
      selectedRows,
    };
  },
};
</script>

这个示例中，我们假设每行都有一个 `id` 属性作为唯一的标识。当数据发生变化时，我们会尝试在新数据中寻找旧有的行，并重新选中它们。同时，`@selection-change` 事件处理程序负责接收用户的直接选择，确保实时同步。

注意，`setCurrentRow`、`select` 等方法的具体名称取决于 Element Plus Table 的具体 API。你需要查阅官方文档了解准确的用法。