vue3+elementPlus表格嵌套外层表格多选联动内层表格选中状态

在Vue 3和Element Plus中，可以通过使用el-table的row-key属性和expand-change事件来实现嵌套表格的多选联动。以下是一个简单的示例：

<template>
  <el-table
    :data="outerData"
    @selection-change="handleOuterSelectionChange"
    row-key="id"
    ref="outerTable"
    :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleExpandChange(scope.$index, scope.row)">展开</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand">
      <template #default="props">
        <el-table
          :data="props.row.innerData"
          :row-key="innerRowKey"
          @selection-change="handleInnerSelectionChange(props.row)"
          ref="innerTable"
          :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="innerName" label="内部名称"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const outerData = ref([
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    innerData: [
      { innerId: 11, innerName: '内部1' },
      { innerId: 12, innerName: '内部2' },
    ],
    selectedInnerRows: [],
  },
  // ...更多数据
]);
 
const handleOuterSelectionChange = (selection) => {
  // 外层表格选中变化时，操作内层表格的选中状态
  selection.forEach((item) => {
    item.selectedInnerRows = item.innerData.map((innerItem) => innerItem);
  });
};
 
const handleInnerSelectionChange = (row) => {
  const selected = row.innerData.filter((item) =>
    row.selectedInnerRows.some((selectedItem) => selectedItem.innerId === item.innerId)
  );
  row.se