el-table 点击单元格获取多级表头

`el-table` 是 Element UI 中的一个表格组件，它提供了丰富的功能和自定义选项，包括点击单元格事件处理。如果你想要获取多级表头（即嵌套的表头或树形结构），你需要利用它的 `row-header` 和 `children` 属性，以及 `expand-row-keys` 或者 `tree-props` 来实现展开和折叠的功能。

具体步骤如下：

1. **设置 row-header**: 在 `el-table-column` 中添加 `row-header` 属性，定义每个行的表头内容。例如，对于一级表头：

<el-table-column type="index" label="索引"></el-table-column>
<el-table-column prop="header1" label="一级表头1" row-header></el-table-column>

2. **管理多级表头**: 如果有多级，可以在每个节点的 `children` 数组中包含子节点。在每个子节点的 `el-table-column` 中也可以添加 `row-header` 属性，表示二级表头：

<el-table-column prop="subHeader1" label="二级表头1" row-header></el-table-column>

3. **展开/折叠行**: 使用 `expand-row-keys` 或者 `tree-props` 根据实际数据结构配置展开折叠规则。比如，你可以为每一项数据添加一个 `expanded` 属性来控制是否展开：

data() {
  return {
    tableData: [
      { id: '1', header1: '父级1', children: [{ id: '1-1', subHeader1: '子级1' }] },
      // ...
    ],
    expandRowKeys: [] // 初始不展开任何行
  }
},
methods: {
  toggleExpand(row) {
    this.expandRowKeys = [...this.expandRowKeys, row.id]; // 展开
    // this.expandRowKeys.filter(key => key !== row.id); // 收缩
  }
}

当你在表格中点击一个单元格，可以通过监听 `@row-click` 事件，然后判断当前行是否可展开来进一步操作：

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <!-- 表格列 -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleRowClick(row) {
      if (row.children && !row.expanded) {
        this.toggleExpand(row);
      } else if (row.expanded) {
        // 处理收起操作
      }
    }
  }
};
</script>