Vue+Element Plus多表格选中数据统一管理与同步移除方案

基于Vue + Element Plus的el-table组件开发Web应用，核心能力为支持用户上传多张表格，通过@selection-change事件处理行选择逻辑，最终基于选中数据调用v-network-graph生成关系图谱。
当前通过v-for循环渲染多表格，已实现选择列、表头字段角色设置菜单、搜索框、行删除按钮等功能，核心模板代码如下：

<el-table v-for="(tab,index) in r" :data="tab" :key="index"  border style="width: 100%" height="500" @selection-change="handleSelectionChange" @header-click="contextmenu">
  <el-table-column type="selection" width="55"/>
  <el-table-column  fixed align="center"  v-for="col in x[index]" :prop="col.field" :label="col.field" :key="col.field">
  <template #header="scope" > 
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect">
          <el-sub-menu index="1">
            <template #title>{{col.field}}</template>
            <el-menu-item index="Source" @click="handleSource(scope.column.property)">Source</el-menu-item>
            <el-menu-item index="Target" @click="handleTarget(scope.column.property)">Target</el-menu-item>
            <el-menu-item index="Using" @click="handleUsing(scope.column.property)">Using</el-menu-item>
            <el-sub-menu index="Property">
              <template #title>Property</template>
              <el-menu-item index="Property_target" @click="handlePropertyTarget(scope.column.property)">Target</el-menu-item>
              <el-menu-item index="Property_target" @click="handlePropertySource(scope.column.property)">Source</el-menu-item>  
              </el-sub-menu>
            </el-sub-menu>
        </el-menu>
      </template>  
      </el-table-column>
  <el-table-column>
    <template #header>
        <el-input v-model="searchQuery" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" type="danger" @click="handleDelete(scope.$index,index)">Delete</el-button>
         <!--<el-button type="primary" @click="handleEditRow(scope.$index)">Edit</el-button>-->
      </template>
    </el-table-column>
  
  </el-table>

Element Plus的@selection-change事件仅返回当前操作表格的选中行数组，切换操作不同表格时，回调参数是对应表格的独立选中集合，无法直接获取跨多表的全量选中数据。
最初尝试自定义selected_data数组存储所有表格的选中行，实现的handleSelectionChange逻辑仅支持选中新增行的追加：

handleSelectionChange(val){
  console.log(val)
  for(let i=0;i<val.length;i++){
    if (Object.values(this.selected_data).includes(val[i])==false){
    this.selected_data[Object.keys(this.selected_data).length] = val[i]
  }
  }
   console.log(this.selected_data)
 }

该逻辑无法适配取消选中场景：用户在某张表格取消勾选某行时，Element Plus返回的当前表选中数组会移除对应行，但自定义的汇总数组无法同步移除被取消勾选的行，后续重新生成图谱时仍会包含已取消选中的无效行数据。

核心逻辑是不要用一维数组零散做选中项的增删判断——selection-change本身只返回当前表操作后的全量选中结果，不会告诉你具体哪条被取消了，逐行对比增删很容易漏判。最稳妥的写法是按表格索引分块存储每张表的选中状态，每次触发事件直接覆盖对应表的选中数据，需要全量数据时再做合并，具体步骤如下：

• 第一步：改造选中数据的存储结构，用对象/数组按表索引单独存每张表的选中集合，同时加计算属性自动生成跨表全量选中数据

data() {
  return {
    // 其余原有业务数据保持不变
    tableSelectedMap: {} // 键为表格的index索引，值为对应表格当前的选中行数组
  }
},
computed: {
  // 全量选中数据直接从计算属性取，自动同步最新状态
  allSelectedRows() {
    return Object.values(this.tableSelectedMap).flat()
  }
}

• 第二步：修改模板上的事件绑定，把当前循环的表格索引传给事件回调，这样触发事件时能明确知道是哪张表的选择状态变了

<el-table 
  v-for="(tab,index) in r" 
  :data="tab" 
  :key="index"  
  border 
  style="width: 100%" 
  height="500" 
  @selection-change="(val) => handleSelectionChange(val, index)"
  @header-click="contextmenu"
>

• 第三步：重写选择变更处理逻辑，每次触发直接覆盖对应表的选中记录，不需要自己逐行判断增删

handleSelectionChange(currentSelected, tableIndex) {
  // 直接用当前表的最新选中结果覆盖旧值即可，自动处理选中/取消选中的所有场景
  this.$set(this.tableSelectedMap, tableIndex, currentSelected)
  // 后续生成图谱直接取this.allSelectedRows即可，就是跨表的全量有效选中数据
  console.log('跨表全量选中数据：', this.allSelectedRows)
}

补充注意事项 #

• 如果后续有关闭/删除上传表格、清空单表数据的操作，记得同步清除tableSelectedMap里对应索引的存储记录，避免残留无效数据
• 如果表格行存在数据更新、替换的场景，建议给每一行提前加唯一_rowId标识，后续做数据去重、校验时用id判断，比直接对比对象引用更可靠

内容的提问来源于stack exchange，提问作者Tallion 22