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

站长

2024年07月15日 09:00 · 阅读数 9

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

 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'
            }]
          }]
        }],

1个回答

test

2024-07-15

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

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容