elementui的tree树形控件懒加载的数据结构怎么让后台怎么返回？

Z时代
2024-02-17
分类：IT

这是之前全部展示的，现在想做成懒加载该怎么让后台改下，具体结构咋改呢

 data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]        }],

回答：

<el-tree ref="tree" id="fixtree" :props="defaultProps" node-key="unifiedId" :check-on-click-node="true" :load="loadNode" // 懒加载 :filter-node-method="filterNode" lazy

@check-change="getChecked">

defaultProps: { children: 'children', label: 'name', //名称 value: 'unifiedId', //id值 isLeaf: 'hasChildren', //判断是否有子数据 disabled: 'choiceStatus' //禁用

},

mounted() {
    this.sfhusi() // 刚进来默认调取一级},


 // 获取组织架构
        loadNode(node, resolve) {
            if (node === undefined || node.level === 0) {
                this.chooseNode = node
                resolve(this.treeData01)
            } else {
                this.parent_id = node.data.unifiedId //获取请求下一级的id
                this.getChildrenNode()
                setTimeout(() => {
                    resolve(this.treeData01)
                }, 2000)
            }
        },
         // 一级
        sfhusi() {
            this.$api.post('api/systemCenter/adminCenter/getDepartmentAndStaff', {
                staffUserName: '',
                pid: this.parent_id //请求下一级的id
            }).then(res => {
                this.chooseNode = 0
                if (res && res.length > 0) {
                    this.treeData01 = res
                }
            })
        },
        // 二级...
        getChildrenNode() {
            this.$api.post('api/systemCenter/adminCenter/getDepartmentAndStaff', {
                pid: this.parent_id //请求下一级的id
            }).then(res => {
                if (res.length === 0) {
                    this.treeData01 = res
                } else {
                    this.chooseNode = 0
                    this.treeData01 = res
                }
            })
        },
            })
        },