vue 3 让el-table 在树形展开数据中，左侧也全都是，点击区域

在 Vue 3 中，如果想要实现在 Element UI 的表格 `el-table` 上展示树形数据，并且在展开节点时左侧区域始终保持显示，你可以使用 `el-tree` 组件配合 `el-table-column` 来构建这种效果。以下是基本步骤：

1. 安装依赖：首先确保已安装了 Element UI，如果没有，可以通过 `npm install element-ui` 或者 `yarn add element-ui` 进行安装。

2. 使用 `el-tree` 和组件嵌套：创建一个包含 `el-tree` 的容器，树节点的数据结构应该包括展开状态 (`expand`)，这样可以控制每个节点是否展开。

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      default-expand-all
      @node-click="handleNodeClick"
      ref="treeRef"
    ></el-tree>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="tableRef"
    >
      <!-- 表格列配置 -->
      <el-table-column
        prop="name"
        label="Name"
      />
      <!-- 添加一个特殊的列用于展开/关闭，例如用图标表示 -->
      <el-table-column
        fixed
        prop="expand"
        label="Expand"
        render="renderExpandColumn"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [], // 树形数据源
      tableData: [], // 表格数据源
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.expand) {
        this.$refs.treeRef.collapseAll();
      } else {
        this.$refs.treeRef.expandNode(node);
      }
      // 更新表格数据
      const parent = this.findParentOfTableIndex(this.tableData, node.id); // 找到表格对应行的父级
      if (parent) {
        parent.expand = !parent.expand;
      }
    },
    findParentOfTableIndex(tableData, nodeId) { // 自定义查找函数
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].parentId === nodeId) {
          return tableData[i];
        }
      }
      return null;
    },
    renderExpandColumn(h, { row }) {
      return h('el-button', {
        props: {
          icon: row.expand ? 'el-icon-arrow-right' : 'el-icon-arrow-bottom',
          type: 'text'
        },
        on: {
          click: () => this.handleNodeClick(row)
        }
      });
    }
  }
};
</script>

在这个例子中，当用户点击树形节点时，会相应地调整表格中的展开状态。`findParentOfTableIndex` 函数可以根据表格数据找到与节点关联的行，以便同步展开/折叠操作。