概念:支持树类型的数据的显示。 当 row 中包含children字段时,被视为树形数据。 渲染嵌套数据需要 prop 的row-key
要实现这样的效果,要注意:
<el-table :data="treeData" <!-- 传入你的数据 --> row-key="id" <!-- ① 每行的唯一标识 --> :tree-props="{ children: 'children' }" <!-- ② 子节点在哪个字段 --> >row-key="id":告诉 el-table 用每个节点的id作为唯一 key 来追踪展开/折叠状态tree-props="{ children: 'children' }":告诉 el-table 子数据在children字段里找- 数据正好是
{ id: 2, children: [{ id: 7, ... }] }这种结构
示例数据结构:
[{"id":2,"parentId":null,"name":"用户管理","path":"/user","icon":"User","permission":"user","type":"menu","visible":true,"sort":2,"component":null,"createTime":"1782801420445","updateTime":"1782813495701","children":[{"id":7,"parentId":2,"name":"管理员","path":"/user/admin","icon":null,"permission":"user:admin","type":"menu","visible":true,"sort":1,"component":"@/views/user/AdminUserList.vue","createTime":"1782801420964","updateTime":"1782801420964","children":[]},{"id":8,"parentId":2,"name":"B端用户","path":"/user/b","icon":null,"permission":"user:b","type":"menu","visible":true,"sort":2,"component":"@/views/user/BUserList.vue","createTime":"1782801421127","updateTime":"1782801421127","children":[]}]},
{"id":23,"parentId":null,"name":"系统管理","path":"/system","icon":"Setting","permission":"system","type":"menu","visible":true,"sort":8,"component":null,"createTime":"1782802591777","updateTime":"1782802591777","children":[{"id":24,"parentId":23,"name":"菜单管理","path":"/system/menu","icon":null,"permission":"system:menu","type":"menu","visible":true,"sort":1,"component":"@/views/system/MenuList.vue","createTime":"1782802592547","updateTime":"1782802592547","children":[]},{"id":25,"parentId":23,"name":"角色管理","path":"/system/role","icon":null,"permission":"system:role","type":"menu","visible":true,"sort":2,"component":"@/views/system/RoleList.vue","createTime":"1782802592742","updateTime":"1782893277192","children":[]}]}]