element-ui树形控件(利用递归把后端数据转换成树形)

Posted 2022-05-31 SpaceX7_s

element的tree树形控件需要的是树形结构的数据，一个对象里面放入当前节点子节点，以数组的形式存放

通过文档可以发现，树形控件需要通过data属性接收数据，数组里的对象的label属性为一级节点，如果需要在一级节点下设置二级节点，那么就是在对象里放入一个数组

声明节点的值通过label查找，如果修改为 label:‘name’,那么节点的值就会通过name属性去查找，绑定给 :data 的数组里的对象就应该设置为

 list: [
        
          name: "xxx",//一级节点的值
          /*默认设置从children查找子节点，意思就是如果当前对象
            如果有children属性并且为一个数组，数组里的对象有name
            属性，那么该属性就是该节点的子节点     
          */
          children: [
            
              name: xxx,//二级节点的值
            ,
          ],
        ,
      ],

从后端返回的数据是一个数组，里面是一个个的对象，不是属性结构，使用递归把数据转换成树形结构，通过条件知道，一级节点的对象pid属性为空，当前节点的id等于它子节点的pid

export function transListToTreeData(list, RootValue) 
  let arr = [];
  list.forEach((item) => 
    //如果数据对象的pid为 '' 说明数据为根节点
    if (item.pid === RootValue) 
      let children = transListToTreeData(list, item.id); //寻找id等于该对象pid的数据，为它的子节点,返回一个数组
      if (children.length) 
        item.children = children; //往对象添加一个children属性，属性值为一个数组
      
      arr.push(item);
    
  );
  return arr;