转换Json类型数据为element tree控件中需要的label、id、child格式

话不多说，先上效果图

 

数据源

数据是后台存在mongodb数据库中，传给前端直接用的

"case_name": "案件名1", "task_id": ["10000", "10001"]
"case_name": "案件名2", "task_id": ["20000", "20001","20002"]
"case_name": "案件名3", "task_id": ["30000", "30001","30002","30003"]

实现代码

树形控件的添加

 <el-tree ref="tree" :data="treeData" :props="defaultProps" highlight-current="true" default-expand-all="false" @node-click="handelNodeClick" />

json数据转为树形控件需要的类型的数据 

id可以根据需要自行配置

    getTreeData() {
      const temp_list = []
      for (var i = 0; i < this.tempList.length; i++) {
        const obj = {
          label: this.tempList[i].case_name,
          id: i + 1,
          children: []
        }
        if (this.tempList[i].task_id.length >= 1) {
          let temp = this.tempList[i].task_id.length
          while (temp > 0) {
            // eslint-disable-next-line no-unused-vars
            const obj_child = {
              label: this.tempList[i].task_id[this.tempList[i].task_id.length - temp],
              id: (i + 1) * 100 + this.tempList[i].task_id.length - temp
            }
            temp--
            obj.children.push(obj_child)
          }
        }
        temp_list.push(obj)
      }
      this.treeData = temp_list
    },