效果:
在这里插入图片描述
后台返回的数据结构
在这里插入图片描述
递归成树形数据结构处理

    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
        }
      })
    },

树形数据结构如下:
在这里插入图片描述
html结构渲染 row-key="deptId
在这里插入图片描述
递归处理数据结构也可参照
el-Cascader级联选择器的使用

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐