前端-数据树状化

前端-数据树状化

最近的一个需求，需要在页面显示一个树状结构，显示每个地区的公司。
直接上代码：
本代码是按照父结点的name等于子结点的parentId来实现的。可以根据需求变更。

      getDeptTree().then(response => {
        let cloneData = JSON.parse(JSON.stringify(response.data))  // 对源数据深度克隆
        var data =  cloneData.filter(father=>{
          let branchArr = cloneData.filter(child=>father.name == child.parentId)  //返回每一项的子级数组
          branchArr.length>0 ? father.children = branchArr : ''  //如果存在子级，则给父级添加一个children属性，并赋值
          return father.parentId==0;   //返回第一层
        });
        this.deptOptions = data
      });

页面用的是el-tree

<el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
        />