Vue3 - Element Plus 树形表格组件 el-table 一键全部展开折叠功能，支持动态数据及懒加载点击父级才去请求的场景，Tree树状表格每行带有children的表格全部收起和折叠！

### Element Plus 多级表格实现 为了创建一个多级表格，在Element Plus中可以利用`el-table`组件及其内置支持的树形数据展示功能。通过设置`tree-props`属性，指定用于表示父子关系的数据字段名称以及配置其他选项，能够轻松构建具有层次结构的数据列表。 对于解决提到的第一列不对齐问题，可以通过自定义样式调整`.el-table__row`下的单元格内边距来修正显示效果[^1]： ```css /* 使用深层作用选择器穿透样式 */ .el-table /deep/ .el-table__row:not([class*=&#39;el-table__row--level-&#39;]) { td:first-child { padding-left: 24px; } } ``` 下面是一个简单的多级表格实例代码片段，展示了如何加载并渲染带有子项目的JSON格式化数据源到页面上： #### HTML模板部分 ```html <template> <div id="app"> <!-- 定义table标签 --> <el-table :data="tableData" style="width: 100%" row-key="id" :default-expand-all="true" border default-expanded-keys="[1]" :tree-props="{children: &#39;children&#39;, hasChildren: &#39;hasChildren&#39;}"> <!-- 表头定义 --> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> ``` #### JavaScript逻辑处理 ```javascript <script setup lang="ts"> import { ref } from "vue"; // 初始化表格数据 const tableData = ref([ { id: 1, date: &#39;2016-05-02&#39;, name: &#39;王小虎&#39;, address: &#39;上海市普陀区金沙江路 1518 弄&#39;, children: [ { id: 3, date: &#39;2016-05-04&#39;, name: &#39;王小虎的儿子&#39;, address: &#39;上海市普陀区金沙江路 1517 弄&#39; }, // 更多子节点... ] }, // 其他顶层条目... ]); </script> ``` 此示例中的关键在于正确设置了`row-key`参数指向唯一标识符，并且指定了`tree-props.children`作为存储子元素数组的名字。这使得框架知道哪些记录应该被视作父节点而展开成多个层级。