element-ui-树状表格

需求：

要做出如下图所示的 树形表格，也就是数据之间有父子类关系的这种，可以点击展开、收缩

原数据示例

[
        {
            "id": 1,
            "name": "组织架构",
            "description": "组织架构",
            "type": 1,
            "code": "department",
            "pid": 0,
            "enVisible": "1"
        },
        {
            "id": 2,
            "name": "角色管理",
            "description": "角色管理菜单",
            "type": 1,
            "code": "role",
            "pid": 0,
            "enVisible": "1"
        },
        {
            "id": 45,
            "name": "子权限",
            "description": "",
            "type": 2,
            "code": "sonPerm1",
            "pid": 1,
            "enVisible": "0"
        },
        {
            "id": 46,
            "name": "22",
            "description": "",
            "type": 2,
            "code": "22",
            "pid": 2,
            "enVisible": "0"
        }
    ]

转化为树状数据

[
    {
        "id": 1,
        "name": "组织架构",
        "description": "组织架构",
        "type": 1,
        "code": "department",
        "pid": 0,
        "enVisible": "1",
        "children": [
            {
                "id": 45,
                "name": "子权限",
                "description": "",
                "type": 2,
                "code": "sonPerm1",
                "pid": 1,
                "enVisible": "0"
            }
        ]
    },
    {
        "id": 2,
        "name": "角色管理",
        "description": "角色管理菜单",
        "type": 1,
        "code": "role",
        "pid": 0,
        "enVisible": "1",
        "children": [
            {
                "id": 46,
                "name": "22",
                "description": "",
                "type": 2,
                "code": "22",
                "pid": 2,
                "enVisible": "0"
            }
        ]
    }
]

实现

1.使用树形组件
在学习树形表格之前，肯定得先搞懂普通的树形组件是怎么搞的，然后将其套到表格中就好了，请参考ElementUI官方文档中的使用方法


2.使用树形表格

下面这段话出自博客：Element-ui 表格实现树形结构表格_elementui树形表格_在奋斗的大道的博客-CSDN博客

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。

渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

row-key="id"和:tree-props="{children: 'children', hasChildren: 'hasChildren'}是必须的。

代码参考

<el-table
        :data="permList"
        border
        :header-cell-style="{backgroundColor:'#F5F6F8'}"
        row-key="id"
        :default-expand-all="true"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column label="名称" prop="name" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="text" @click="addSonPerm(row)">添加</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

扁平数据转化为树状数据函数

export const transListToTree = (list, rootPid) => {
  const result = []
  list.forEach(item => {
    if (item.pid === rootPid) {
      const children = transListToTree(list, item.id)
      if (children.length > 0) {
        item.children = children
      }
      result.push(item)
    }
  })
  return result
}