vue3 el-table e-table 怎么解决合并多行，选中只选中高亮了合并的第一行

在Vue3中，`el-table` 是 Element UI 提供的一个表格组件，它支持通过 `row-class-name` 或者 `cell-style` 属性来自定义行或单元格的样式，包括合并行。如果你想实现多行合并并且当某一行被选中时只高亮显示合并的第一行，你可以按照以下步骤操作：

1. 首先，在数据结构上，你需要维护一个包含合并信息的对象数组。比如每个对象有一个 `expandedRows` 数组，表示当前行及其合并的行。

data() {
  return {
    tableData: [
      { id: 1, name: '合并行A', expandedRows: [1, 2] },
      { id: 2, name: '行B', expandedRows: [] },
      // ...
    ],
    selectedRowKeys: [], // 用于存储选中的行ID
  };
},

2. 使用自定义列模板 (`<template slot-scope="scope">`) 来合并行并添加点击事件处理。当行被点击时，检查是否属于已合并的行，并更新 `selectedRowKeys` 和 `expandedRows`：

<el-table-column label="Name" prop="name">
  <template slot-scope="scope">
    <template v-for="(item, index) in scope.row.expandedRows">
      <template v-if="index === 0">
        <span :class="{ highlight: scope.$index === selectedRowKeys.indexOf(scope.row.id) }">{{ item }}</span>
        <span v-else>...</span>
      </template>
    </template>
  </template>
</el-table-column>

methods: {
  handleSelectionChange(rows) {
    this.selectedRowKeys = rows.map(row => row.id);
    // 如果需要，还可以在这里处理合并行的展开状态变化
  }
}

3. 当有行被选中时，根据 `selectedRowKeys` 更新高亮样式。例如，你可以创建一个 CSS 类来定义高亮样式：

.highlight {
  background-color: yellow; /* 可根据需求修改颜色 */
}

这样，当你在 `el-table` 中选择一行时，只会高亮显示合并后的第一行。