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

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

• template代码

      <el-tree
         :props="props"
          ref="tree"
          lazy
          :load="loadNode"
          node-key="id"
          :expand-on-click-node="false"
          @node-click="nodeClick"
          :filter-node-method="filterNode">
          <span class="tree-node" slot-scope="{ node, data }" :title="data.name">
            <span>{{ data.code }}_{{ data.name }}</span>
          </span>
        </el-tree>

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

以上代码亲测有效