列表转化成树形数据

紫~阳

于 2021-08-25 15:52:37 发布

阅读量284

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_45706862/article/details/119913068

版权

vue 专栏收录该内容

23 篇文章

订阅专栏

这篇博客介绍如何将列表形式的数据转换成树形结构，以适应表格展示的需求。文章提到可以使用tranListToTreeData函数进行转换，并强调了在处理过程中设置row-key的重要性，特别是在实现表格的折叠功能时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 把平铺的数组结构转成tree
export function tranListToTreeData(arr) {
  const newArr = []
  const map = {}
  arr.forEach(item => {
    item.children = []
    const key = item.id
    map[key] = item
  })
  arr.forEach(item => {
    const parent = map[item.pid]
    if (parent) {
      // 有父级
      parent.children.push(item)
    } else {
      // 没有父级
      newArr.push(item)
    }
  })
  return newArr
}

调用tranListToTreeData(数据)
然后添加row-key=""折叠表格

<el-table 
          border 
          :data="list" 
        row-key="id">
</el-table>