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`)，这样可以控制每个节点是否展开。 ```html <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` 函数可以根据表格数据找到与节点关联的行，以便同步展开/折叠操作。