vue12-ElementUI tree组件懒加载的实现

项目中用到的Element UI tree组件,由于向后台请求回来的数据庞大,需要使用懒加载,就研究了下,总结代码如下

• template代码

      
          
            {{ data.code }}_{{ data.name }}
          
        

• script代码

  /* 在data中定义
    props: {
          label: 'name',
          children: 'child',
          isLeaf: 'leaf'
        }*/
   loadNode(node, resolve) {
        console.log(node)
        // console.log(resolve)
        if (node.level === 0) {
          return resolve([{ name: '第一级', id: '1' }, { name: '第一级02', id: '2' }])
          // 这里resolve的数据是后台给的,id用于之后点击发起请求时的参数
        } else {
          this.getTreeChild(node.data.id, resolve)
        }
      },
      getTreeChild(id, resolve) {
        console.log(id)
//  这里可以替换成向后台发起的请求修改data,为了演示我用的是写死的数据,获取到data后,resolve出去就好了
        if (id === '1') {
          const data = [{
            name: '第二级',
            code: '2222',
            leaf: true,
            child: []
          }, {
            name: '第二级02',
            child: [],
            id: '1'
          }]
          resolve(data)
        } else {
          const data = [{
            name: '第二级33',
            code: '3333',
            leaf: true,
            child: []
          }, {
            name: '第二级02333',
            child: []
          }]
          resolve(data)
        }
      },

以上代码亲测有效