解决vue+element ui中表格树按需引入时增删改的回显bug

在一个利用element的权限管理项目中，用到了下图的相关效果，这里的部门有层级，类似与树结构，这里我们用表树结构来形容这个表格，同时，数据是通过节点，按需加载resolve回数组的。

然而，当我需要对节点进行操作时，因element处理此数据是放入浏览器缓存中的，即使我重新请求数据，也无法更新表中的数据

在考虑用户体验的前提下我进行了相关的思考，数据在缓存中，那最简单的，我们把这个table销毁再创建，数据不就及时更新了，但是这样的用户体验教差。

data中定义相关的值

 data() {
    return {
      tableShow:true
    };
  },

在增删改操作成功回调时，进行dom的销毁与创建

addActive({ ...this.form, parentId: id }).then((res) => {
        res ? this.msgSuccess("新增成功") : null;
        this.reset();
        this.getList();
        this.tableShow=false;
        this.$nextTick(() => {
                this.tableShow=true;
            })
      });

哪，有没有用户体验更好地方法呢？扒拉了不少资料，我们来看看优化版

data(){
	return{
		//节点数据是一个伪数组，我们用es6的Map来存储它
      maps: new Map(),
      tabRow:{},
      parentId:0,
		}
	}

 // 操作树结构表时实时更新表内数据
    updataTable(row){
      // 判断是否为顶层节点
        if(row.parentId=='0'){
          this.getList();
        }
        // 否则刷新该dom的父节点数据，以空数组替换
        else{
        //element的数据缓存是放这里的，因此我们可以在这里先用空数组替换它，清空缓存
          this.$set(this.$refs.tableDom.store.states.lazyTreeNodeMap, row.parentId, []);
          let treeObj=this.maps.get(this.parentId);
          treeObj.hasChildren=true;
          this.load(treeObj.tree,treeObj.treeNode,treeObj.resolve);
        }
    },
    // 按需懒加载表格数据
    load(tree, treeNode, resolve) {
      this.parentId= tree.id;
      this.maps.set(this.parentId,{tree,treeNode,resolve})
      listConfig({
        id: tree.id,
      }).then((response) => {
        response.data.forEach((item) => {
          item.hasChildren = true;
        });
        resolve(response.data);
      });
    },

 /** 新增按钮操作 */
    handleAdd(row) {
      this.tabRow=row;
      if (row) {
        this.form.parentName = row.name;
        this.form.parentId = row.id;
      }
      this.open = true;
      this.form.title = "添加系统";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.tabRow=row;
      this.form = JSON.parse(JSON.stringify(row));
      this.form.title = "修改系统";
      this.open = true;
    },
     /** 删除按钮操作 */
    handleDelete(row) {
      this.tabRow=row;
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delModule({ id: row.id });
        })
        .then(() => {
         this.updataTable(this.tabRow);
          this.msgSuccess("删除成功");
        });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // 编辑
          if (this.form.id) {
            editModule(this.form).then((res) => {
              this.msgSuccess("修改成功");
              this.reset();
              this.updataTable(this.tabRow);
            });
          }
          // 各级新增
          else {
            this.addModuleActive(this.form.parentId);
          }
        }
      });
    },

到这一步，我们已经实现了基于element表树结构增删改的操作了。完整代码暂放腾讯云