使用element tree实现懒加载，更新某一节点的数据

1.tree 懒加载
只需要在el-tree标签上面添加lazy，load属性，load的接收是一个函数。这里贴上官网给出的方法

<el-tree
   :data="treeList"
   ref="tree"
   class="vue-tree"
   lazy
   :load="loadNode"
   :highlight-current="true"
   :node-key="nodeKey"
   @node-click="nodeClick"
   :expand-on-click-node="false"
   :props="defaultProps"
 ></el-tree>

2.load方法使用

// 懒加载获取树形结构
loadNode(node, resolve) {
//调用接口时，我们的需求是第一级传参为0，后面为当前节点的唯一表示id，可以根据需求而定
// node.level为0时，就是tree的第一级
 const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
 getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
   resolve(
     data.data.map(item => {
       return {
         ...item,
         leaf: !item.hasChildren // 此参数用来判断当前节点是否为叶子节点
       }
     })
   )
 })
},

3.leaf的作用
当我们使用的tree懒加载，只会加载到我们请求的那一层级，所以当我们在叶子节点请求时，请求完不会出现数据，这样的体验就不是很好，这个时候就需要借助tree的props里面isLeaf的配置方法了

defaultProps: {
  children: 'children',
  label: 'spaceName',
  isLeaf: 'leaf'
}

加上此字段，就可以清晰的看出哪些节点为叶子节点了

4.我们一旦使用懒加载的方式的话，那我们在对tree接口进行增删改查时，及时刷新数据时，就会造成我们还需要从新获取接口
其实如果我们仔细观察的话，我们会发现已经请求过的节点，我们收起，再次打开是不会请求接口的，这样的话，我们可以这么做

/**
 * 单独刷新节点
 * guid: 当前节点的父级唯一标识节点
 */
refreshTreeNode(guid) {
  let node = this.$refs.tree.getNode(guid)
  if (node) {
    node.loaded = false
    node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
},