Vue + Element UI表格(树形数据与懒加载)增、删、改、查以及节点不刷新解决办法

小白入门请多关照.如有问题,还望指点!
如果觉得不错请支持一下!

image.png

核心代码

更新树状节点
注意修改tableRefName

    updateTableTree(pid, nodes) {
      //更新节点数据
      //pid为父级id,nodes为修改后的子集内容
      //以下面数据结构举例
      //pid=3  子集为id等于3的children数据
      this.$set(this.$refs.tableRefName.store.states.lazyTreeNodeMap,pid, nodes );
    },
    refTable() {
     /**
      *作用:更新树状节点
      * 因树状原因需更新外层
      *所以递归更新所有节点
      */
      let _this = this;
      function dg(data) {
        for (let i in data) {
          if (data[i].children) {
            _this.updateTableTree(data[i].id, data[i].children);
            dg(data[i].children);
          }
        }
      }
      dg(this.tableData);
    }

数据结构

        sourceData: [{
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          pid: null,
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1520 弄',
              pid: 3
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1521 弄',
              pid: 3
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

全部源码

增删改查的地方已修改为相应的注释