Element Plus-el-table树形数据

概念：支持树类型的数据的显示。 当 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":[]}]}]