树形表格示例

树形表格完整示例（Vue 2 + Element UI）

功能包含：

• 展示父子层级结构

• 支持展开/收起子项

• 操作列（编辑、删除）

• 自定义状态标签

示例代码

<template><div class="tree-table-demo"><el-card><el-table:data="menuTree"row-key="id"borderstyle="width: 100%":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="title" label="标题" /><el-table-column prop="type" label="类型" /><el-table-column prop="path" label="访问路径" /><el-table-column prop="route" label="路由地址" /><el-table-column prop="component" label="页面组件" /><el-table-column prop="status" label="状态"><template slot-scope="scope"><el-tag type="success">{{ scope.row.status }}</el-tag></template></el-table-column><el-table-column label="操作" width="180"><template slot-scope="scope"><el-button type="text" size="small">编辑</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table></el-card></div>
</template><script>
export default {name: 'TreeTableDemo',data() {return {menuTree: [{id: 1,title: '系统管理',type: '目录',path: '/system',route: '/system',component: '',status: '已注册',children: [{id: 2,title: '菜单管理',type: '菜单',path: '/system/menu',route: '/system/menu',component: 'SystemMenuList',status: '已注册',children: [{id: 3,title: '新增',type: '按钮',path: 'SystemMenuCreate',route: 'SystemMenuCreate',component: '',status: '已注册'},{id: 4,title: '修改',type: '按钮',path: 'SystemMenuUpdate',route: 'SystemMenuUpdate',component: '',status: '已注册'},{id: 5,title: '删除',type: '按钮',path: 'SystemMenuDelete',route: 'SystemMenuDelete',component: '',status: '已注册'}]},{id: 6,title: '角色管理',type: '菜单',path: '/system/role',route: '/system/role',component: '',status: '已注册'},{id: 7,title: '用户管理',type: '菜单',path: '/system/user',route: '/system/user',component: '',status: '已注册'}]},{id: 8,title: '工作台',type: '页面',path: '/workspace',route: '/dashboard/workspace/index',component: '',status: '已注册'},{id: 9,title: '关于',type: '菜单',path: '/about',route: '/core/about/index',component: '',status: '已注册'}]}}
}
</script><style scoped>
.tree-table-demo {padding: 20px;
}
</style>

补充说明

属性	说明
row-key="id"	必须设置唯一标识字段，用于识别每一行
tree-props	指定子节点字段名（如 children）和是否有子节点的标志（可选）
嵌套结构	数据结构中通过 children 字段嵌套子项
操作列	可自定义按钮、图标、弹窗等交互

树形表格完整示例（Vue 2）

示例代码

<template><div class="tree-table"><table><thead><tr><th>标题</th><th>类型</th><th>访问路径</th><th>路由地址</th><th>页面组件</th><th>状态</th><th>操作</th></tr></thead><tbody><tr v-for="row in flatData" :key="row.id" v-show="isVisible(row)"><td :class="'indent-' + row.level"><spanv-if="Array.isArray(row.children) && row.children.length"class="toggle"@click="toggle(row)">{{ row.expanded ? '▼' : '▶' }}</span>{{ row.title }}</td><td>{{ row.type }}</td><td>{{ row.path }}</td><td>{{ row.route }}</td><td>{{ row.component }}</td><td><span :class="['tag', row.status === '已注册' ? 'success' : 'info']">{{ row.status }}</span></td><td><button class="btn" @click="edit(row)">编辑</button><button class="btn" @click="remove(row)">删除</button></td></tr></tbody></table></div>
</template><script>
export default {name: 'TreeTable',data() {return {treeData: [{id: 1,title: '系统管理',type: '目录',path: '/system',route: '/system',component: '',status: '已注册',children: [{id: 2,title: '菜单管理',type: '菜单',path: '/system/menu',route: '/system/menu',component: 'SystemMenuList',status: '已注册',children: [{id: 3,title: '新增',type: '按钮',path: 'SystemMenuCreate',route: 'SystemMenuCreate',component: '',status: '已注册'},{id: 4,title: '修改',type: '按钮',path: 'SystemMenuUpdate',route: 'SystemMenuUpdate',component: '',status: '已注册'},{id: 5,title: '删除',type: '按钮',path: 'SystemMenuDelete',route: 'SystemMenuDelete',component: '',status: '已注册'}]},{id: 6,title: '角色管理',type: '菜单',path: '/system/role',route: '/system/role',component: '',status: '已注册'},{id: 7,title: '用户管理',type: '菜单',path: '/system/user',route: '/system/user',component: '',status: '已注册'}]},{id: 8,title: '工作台',type: '页面',path: '/workspace',route: '/dashboard/workspace/index',component: '',status: '已注册'},{id: 9,title: '关于',type: '菜单',path: '/about',route: '/core/about/index',component: '',status: '已注册'}],flatData: []}},created() {this.flatData = this.flattenTree(this.treeData)},methods: {flattenTree(nodes, level = 0, parent = null) {const result = []nodes.forEach(node => {this.$set(node, 'level', level)this.$set(node, 'parent', parent)this.$set(node, 'expanded', false)result.push(node)if (Array.isArray(node.children)) {result.push(...this.flattenTree(node.children, level + 1, node))}})return result},isVisible(row) {let parent = row.parentwhile (parent) {if (!parent.expanded) return falseparent = parent.parent}return true},toggle(row) {row.expanded = !row.expanded},edit(row) {alert(`编辑：${row.title}`)},remove(row) {if (confirm(`确定删除 ${row.title} 吗？`)) {alert('删除成功（模拟）')}}}
}
</script><style scoped>
table {width: 100%;border-collapse: collapse;font-size: 14px;
}
th, td {border: 1px solid #ddd;padding: 8px 12px;text-align: left;
}
.indent-0 { padding-left: 0; }
.indent-1 { padding-left: 20px; }
.indent-2 { padding-left: 40px; }
.indent-3 { padding-left: 60px; }
.toggle {cursor: pointer;margin-right: 5px;font-weight: bold;
}
.tag {display: inline-block;padding: 2px 6px;border-radius: 4px;font-size: 12px;color: #fff;
}
.success { background-color: #67c23a; }
.info { background-color: #909399; }
.btn {padding: 4px 8px;font-size: 12px;margin-right: 4px;cursor: pointer;border: none;border-radius: 4px;background-color: #409eff;color: white;
}
.btn:hover {background-color: #66b1ff;
}
</style>