Element Plus-el-table树形数据

发布时间:2026/7/8 4:02:40
Element Plus-el-table树形数据 概念支持树类型的数据的显示。 当 row 中包含children字段时被视为树形数据。 渲染嵌套数据需要 prop 的row-key要实现这样的效果要注意el-table :datatreeData !-- 传入你的数据 -- row-keyid !-- ① 每行的唯一标识 -- :tree-props{ children: children } !-- ② 子节点在哪个字段 -- row-keyid告诉 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:[]}]}]