关于el-tree缓存的问题,如何解决?

使用组件来做分配权限的需求,在添加用户时给用户直接分配权限,我的问题是,点击修改,把原本就有的权限回显出来,然后还能修改,目前修改已经做到了,就是回显出不来,原因是点击第一次的时候,根据id默认选中树形结构里面的数据,但是回显不到框内,以后的都可以,个人猜测是缓存原因,第一次不回显,从第二次开始就有回显了,目前已经试过很多种方法
以下是我的代码逻辑,请大家详看

  1. img

img


3.

img


4.

img

ElementUI 的 el-tree 组件支持默认启用节点缓存功能,即当一个节点被打开后,它和其子节点的 DOM 元素会被缓存在内存中,这样下次打开该节点时就不用重新创建 DOM 元素,而是直接从缓存中调取,从而提高了展开节点的性能。但是节点缓存功能也可能会导致一些问题,如缓存错误等问题,这里给出一些解决方案:

  1. 强制不使用节点缓存

如果出现了节点缓存引发的问题,可以在 el-tree 标签上添加节点缓存属性 :cacheable="false",强制关闭节点缓存功能。

  1. 手动清空缓存

如果因节点缓存导致显示问题,可以尝试手动清空缓存。ElementUI 为我们提供了 clearCache 方法来清空节点缓存,我们只需要在需要清空缓存的地方调用即可。例如:

this.$refs.tree.clearCache();
  1. 修改节点键

节点缓存的基本原则是根据节点的键来判断是否缓存该节点,如果出现某些节点缓存的错误问题,可以尝试修改节点的键,例如在节点键后添加一个随机的字符串。

  1. 升级ElementUI版本

如果在 ElementUI 早期版本中使用节点缓存功能,可能会存在一些已知问题,可以尝试升级 ElementUI 到最新版本。

总之,在开发过程中,应该谨慎使用节点缓存功能,避免出现缓存导致的问题。如果出现问题可以考虑采用以上的解决方案,或者尝试其他合适的解决方案。