element-ui table懒加载，新增，编辑，删除子节点后的刷新节点

 做全国行政区划的展示，包含街道数据有十几万条，全部加载接口比较慢，所以采取了table的懒加载，在新增子节点，编辑删除节点的过程中，官方文档里面并没有相对应的方法，里面遇到了很多坑，这里记录一下实现方法。

1.首先界面如图所示，业务场景：表格外层有创建按钮，创建的是第一层节点，表格上的添加是指添加子节点，编辑和删除是针对当前节点，编辑时可以编辑父级区划；

2.表格界面主要代码 

            
            
            
            
            
              
            
          

      // 新增编辑弹窗组件
      

3.js主要逻辑，分为新增，编辑和删除；

3.1新增

先判断是否加到最外层，加到最外层就直接push数据到this.refs.table.store.stats.data里面去；

如果不是最外层，先找到父级节点，将新的数据加入到父级的子节点中，并更新父级节点的子节点数量，具体方法见代码中的

addLazyTableItemToParent()方法

3.2编辑

先判断是否改变父级节点，如果没有，直接更新数据；

如果改变了父级节点，先删除原始父级节点上的此节点，再去新的父级节点上添加此子节点；

此段逻辑主要在handleEditOnSave(),findNewParent()方法中

3.3删除

如果时最外层节点，直接在this.refs.table.store.stats.data里面splice此数据；

如果是内层节点，则删除该节点，并更新父级节点的子节点数量；

此段逻辑主要见deleteLazyTableItem()方法

 

下面是主要的js代码