vue3.2 对el-table 树型结构数据的处理（干货）_el-table 树形结构

vue3.2 对el-table 树型结构数据的处理（干货）

将偏平数据转为树状结构的数据（封装了两种方法）

将一维数组处理成带children的el-tree树状数据结构

第一种方法:使用递归的方式处理偏平化数据

/**
 * @Method 使用递归的方式处理偏平化数据
 * @param {*} list 为需要处理的数组
 * @param {*} pid  为传入的顶级id
 */
const transTreeData = (list, pid) => {
  const treeData2 = []
  list.forEach((item) => {
    // 判断每一项的 ParentId 是否等于传入的顶级 pid 一致
    if (item.parent_id === pid) {
      /*  //tag: 如果有一致的数据，在将当前这一项的 id 作为顶级id对象传入   transTreeData */
      //    查看自己本身是否依然有子级分类，以此递归
      const children = transTreeData(list, item.good_type_id)
      // 判断返回的 children 进行判断
      // 如果返回空数组，说明没有子级分类，不做任何处理
      if (children.length) {
        item.children = children
      }
      /* 最终直接将当前数据 push 到treeData2即可 */
      treeData2.push(item)
    }
  })
  return treeData2
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'
运行
运行

注意：parent_id 是后端传过来的父级id

​ good_type_id 是后端传过来的自身的id

第二种方法：通过使用filter的方法

/**
 * @methed 使用filter方法 把偏平数据结构处理成el-tree的树状数据格式
 * @param {*} list 为需要处理的数组
 */
function transTree(list) {
  const treeDataList = []
  list.forEach((item) => {
    if (item.parent_id === 0) {
      treeDataList.push(item)
    }
    const children = list.filter(
      (data) => data.parent_id === item.permission_id
    )
    if (!children.length) {
      return
    }
    item.children = children
  })
  return treeDataList
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'
运行
运行

将下拉的按钮换到指定的列去

不知道大家在开发的过程中有没遇到中这种情况，就是要把下拉按钮放在el-table的指定那一列去，在通过element plus官网了解到一个type属性，其实方法很简单，看下图

这是正常树形数据table

部分代码如下

可以看到所有的下拉按钮都在第一列，目前需求是j将下拉按钮需要在第二列分类名称显示，只需要在分类名称前一个el-table-column分类ID上面添加个type属性就可以实现以下效果：

希望此文章对你有帮助，有什么问题可以提出来互相交流，谢谢