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

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

 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'
            }]
          }]
        }],
阅读 2.7k
3 个回答
 <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
                }
            })
        },
            })
        },

有文档啊懒加载自定义叶子节点

主要就是load事件中通过服务请求子节点数据,数据请求完成后通过resolve(data)通知tree渲染

不太确定你的问题是什么。不过不管后台返回什么,你拿到后整理好再赋值给 tree 组件不就可以了?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题