Element树形结构懒加载增删改查

树形结构，需求是这样的。服务器一次返回同级的节点，要求增删改查不刷新树形结构。删改查都还好，关键是这个增有个小坑。后台给你返回leaf字段判断这个节点有没有子节点，但是elementui中当设置了树形节点isLeaf为true的时候他的append方法添加子节点是无效的。下面是一个leaf为true的节点属性。

问题的关键就是在这两个属性上面。当用户添加的时候将isLeaf和isLeafByUser设置为false。一开只注意到isLeaf，怎么添加都不生效被坑坏了，删除了再添加…被玩坏了
写出来后发现很简单

<template>
   <div>
       <el-tree
       ref="tree"
      :props="props1"
      lazy
      :load="loadNode1"
      :highlight-current='true'
      @node-click="handleNodeClick"
    >
  </el-tree>
    <el-button @click="addNode">添加子节点</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
   data() {
      return {
          props1: {
          label: 'label',
          children: 'children',
          isLeaf:'leaf'
        },
        data1:[{
           label: '一级 1',
          children: [],
        }],
        treeNode:{},
        pointNode:{},
        treeKey:'',
            };
      },
    methods: {
      addNode(){
        if(this.treeNode.isLeaf){
           this.treeNode.isLeaf = false;
          this.treeNode.isLeafByUser= false;
        }        
         this.$refs.tree.append({'label':'添加的子节点','children':[],'leaf':true},this.treeNode); 
         this.treeNode.expanded = true;

      },
      handleNodeClick(node,tree,msg){
           this.treeNode = tree;
      },
      loadNode1(node, resolve) {
        if (node.level === 0) {
          return resolve(this.data1);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
           label: 'leaf',
           children:[],
           leaf: true
          }, {
            label: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
}
</script>

拿的官方的demo。改的话就是修改上面的label属性,删除的话官方API中有remove方法。就不贴代码了。由于代码例子的原因展开再关闭会触发 if (node.level > 1) return resolve([])，显示不出来;而实际上这个地方应该是一个ajax请求。