vue-表格树结构-懒加载-解决子节点修改删除后，不刷新的问题

最新推荐文章于 2025-10-23 16:53:52 发布

原创最新推荐文章于 2025-10-23 16:53:52 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue.js中处理表格树结构时遇到的子节点修改或删除后视图不刷新的问题。首先尝试了通过刷新页面来解决，但导致了节点折叠和全量刷新的不良用户体验。最终采用了一种新的解决方案，实现了只刷新受影响的子节点，保持了良好的用户体验。

问题：
子节点修改删除后，子节点视图不刷新
初次解决办法：

export default {
  inject: ['sizeReload'],
  }

子节点变化后执行：

this.sizeReload()

子节点变化后，进行页面的刷新操作，但是刷新后，节点会自动折叠，且全部刷新用户体验不好。

最终解决办法：

效果图：
在这里插入图片描述
data：

maps: new Map(),

点击展开：

// 数据懒加载
    load(tree, treeNode, resolve) {
      const pid = tree.tid;
      this.maps.set(pid, { tree, treeNode, resolve }); //将当前选中节点数据存储到maps中
      this.$api
        .post(this.$lesUiPath.tmProvinceFind, { tid: tree.tid })
        .then(result => {
          if (result.status == 200) {
            resolve(result.data);
          }
        });
    },

增加、删除、修改-子节点：
this.$refs.table.$refs.tree.store.states.lazyTreeNodeMap—根据实际情况写

const pid = data.tmProvinceId; //取出当前删除行的父级id
const { tree, treeNode, resolve } = this.maps.get(pid); //根据pid取出对应的节点数据
this.$set(
  this.$refs.table.$refs.tree.store.states.lazyTreeNodeMap,
  pid,
  []
); //将对应节点下的数据清空，从而实现数据的重新加载
this.load(tree, treeNode, resolve);