element el-tree懒加载

  <el-tree
                               :props="props"
                               :load="loadNode"
                               lazy
                               node-key="areaId"
                               :expand-on-click-node="false"
                               ref="asyncTree"
                               @check-change="handleCheckChange"
                               @node-click="hadleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span style="display: inline-block;margin-right: 10px">{{ node.label }}</span>
        <span v-if="data.areaId !='root'">
          <el-button
                  type="text"
                  size="medium"
                  @click="() => append(data)">
            新增下级
          </el-button>
               <el-button
                       type="text"
                       size="medium"
                       @click="() => edit(node,data)">
            修改
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
                       </el-tree>

其中 node-key 绑定值为唯一的id，点击时获取到的也是这个值。

props: {
                    label: 'areaName',
                    children: 'zones',
                    isLeaf: 'ext1',
                },

props 绑定的值中，label对应的是显示的文字，isleaf对应为是否有子节点（true/fasle）

    loadNode(node, resolve) {
                if (node.level === 0) {
                    let obj = {
                    }
                    this.findAreaByParentId(obj,resolve)
                }
                if (node.level > 0) {
                    let obj = {
                        "parentId": node.data.areaId,
                        "areaName":node.data.areaName,
                        "subCode":node.data.subCode,
                        "areaNumber":node.data.areaNumber
                    }
                    this.findAreaByParentId(obj,resolve)
                }
            },

loadNode 方法当level的值为0时是第一次默认请求，大于0时是点击时的请求，我这里将resolve作为参数，传递给了请求，然后将请求后得到的数据resolve出去

 findAreaByParentId(obj,resolve){
               findAreaByParentId(obj).then(data => {
                   if(data.responseCode =='1000'){
                       data.content.forEach(item=>{
                           item.ext1 = item.ext1 == 0 ? false: true
                       })
                       resolve(data.content);
                   }
               }).catch(error => {

               });
           },