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

以上程式碼親測有效