el-table树形结构的数据结构处理_eltable递归树型数据

效果：

后台返回的数据结构

递归成树形数据结构处理

    getList() {
      this.loading = true
      const query = Object.assign({}, this.listQuery)
      for (const key in query) {
        if (!query[key]) {
          delete query[key]
        }
      }
      this.comApiUrl.fetchList(query).then(res => {
        // console.log(query) // {}
        console.log(res)
        if (!res.code || res.code === 0) {
          this.list = res.list.filter(item => {
            return item.deptId !== -1
          })
          console.log(this.list)// [{},{},{}...{}]
          this.autoLevel(this.list)
          this.helpArray = Object.assign({}, this.list)
          //   console.log(this.helpArray)
          const array = this.changeDeptList2Tree(0) // 递归成树形结构
          this.list = array
          console.log(this.list) // 树形 [{},{}]
          this.loading = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          this.loading = false
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

树形数据结构如下：

html结构渲染 row-key="deptId

递归处理数据结构也可参照
el-Cascader级联选择器的使用