vue3 element-plus table 组件 实现 树形表格 示例教程

### 如何在 Vue3 和 Element-Plus 中使用 Table 组件实现树形表格 Element Plus 是基于 Vue 3 的组件库，提供了丰富的功能来构建现代化的 Web 应用程序。其中 `Table` 组件支持显示嵌套数据结构并渲染成树形表格的形式。通过设置特定属性和方法，可以轻松实现这一需求。 以下是详细的说明以及代码示例： #### 属性配置 为了使表单能够展示树形结构的数据，需要启用 `row-key` 和 `tree-props` 这两个重要属性[^1]。 - **row-key**: 定义每一行唯一标识符字段名。 - **tree-props**: 配置子节点的相关选项，默认情况下它是一个对象 `{ hasChildren: 'hasChildren', children: 'children' }`。 下面是一段完整的代码示例用于演示如何创建一个带有展开/折叠行为的树状表格: ```vue <template> <el-table :data="tableData" row-key="id" default-expand-all :tree-props="{children: 'children'}"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', children: [ { id: 2, date: '2016-05-04', name: '王小虎的儿子', address: '上海市普陀区金沙江路 1517 弄' } ] }, { id: 3, date: '2016-05-01', name: '李大牛', address: '北京市朝阳区建国路 9 号' } ] }; } }; </script> ``` 上述代码片段展示了基本的树形表格定义方式及其初始化数据源。注意这里设置了默认全部展开 (`default-expand-all`) 并指定了父子关系所在的键名为 `children`. #### 动态加载更多数据 如果希望当用户点击某个父级条目时才去请求对应的孩子列表，则可以通过监听事件或者自定义函数完成动态更新操作[^2]: ```javascript methods: { load(tree, treeNode, resolve) { setTimeout(() => { const childNodes = [{ id: tree.id * 10 + 1, date: `${new Date().getFullYear()}年${Math.floor(Math.random()*12)+1}月`, name:`随机生成的名字_${tree.name}`, address:'虚拟街道'+ Math.floor((Math.random()*100)) }]; // Resolve with new nodes. resolve(childNodes); }, 1000); // Simulate network delay. } } ``` 然后绑定到 `<el-table>` 上作为 lazy 加载回调参数之一即可生效。 --- ###