项目场景：

提示：项目相关背景：
项目中需要操作多个表格的选中数据，一起引用，或者计算金额

---

问题描述

提示：这里描述项目中遇到的问题：

选中的数据容易定位，关键是选中再取消的数据却无从查起
这里我引用官网的代码吧

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{
   
   { scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
      Toggle selection status based on selectable
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import {
      
       ref } from 'vue'
import type {
      
       TableInstance } from 'element-plus'

interface User {
      
      
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
      
      
  if (rows) {
      
      
    rows.forEach((row) => {
      
      
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
      
      
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
      
      
  multipleSelection.value = val
}

const tableData: User[] = [
  {
      
      
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 6,
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
      
      
    id: 7,
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

---

原因分析：

取消选中后，不会记录该条数据，导致数据混乱无从查起

例如：handleSelectionChange 触发后，只记录选中数据， 未选中数据不显示，由于 操作多个表格 直接赋值选中数据显然不满足这个项目场景，处理逻辑有限，所以当 赋值数据 处理不及时，会造成数据混乱，进而导致数据下一步引用逻辑错乱。

---

解决方案：

提示：该问题的具体解决思路：

新建一个 selectedItemsMap[tableRef] 对象，并将读取到的数据存入 各个表格ref="multipleTableRef"对应selectedItemsMap映射对象中，然后 筛选出删除选项，整体处理。这样有利于追踪取消选中的ID

import {
    
     ref } from 'vue';

export function useTableSelection() {
    
    
    // 使用ref创建响应式的selectedItemsMap和selectedItems
    const selectedItemsMap = ref<SelectedItemsMap>({
    
    });
    const selectedItems = ref<Item[]>([]);

    function handleSelectionChange(tableRef: string, selection: Item[]) {
    
    
        let delID: (string | number)[] = [];
        if (selectedItemsMap.value[tableRef]) {
    
    
            // 找出在旧选中项中但不在新选中项中的ID
            delID = selectedItemsMap.value[tableRef].filter((oldItem: Item) =>
               !selection.some((newItem: Item) => newItem.ID === oldItem.ID)
            ).map((item: Item) => item.ID);
        }

        // 更新selectedItemsMap中对应tableRef的选中项
        selectedItemsMap.value[tableRef] = selection;

        // 从全局selectedItems中移除已取消选中的项
        delID.forEach((idToRemove: string | number) => {
    
    
            selectedItems.value = selectedItems.value.filter((item: Item) => item.ID!== idToRemove);
        });

    }

    return {
    
    
        selectedItemsMap,
        selectedItems,
        handleSelectionChange
    };
}

欢迎点赞关注加收藏呦–小码农感谢大家