Vue Element.ui树形组件，触发重新加载事件。

Question

我用Vue创建了一个SPA（类似于云盘），使用Element.ui tree组件来显示文件夹树形结构。问题在于这个树形结构并不会一次性加载全部内容，而是通过lazy修饰符逐步加载。

服务器部分采用mongoose + mongoose-path-tree。使用mongoose-path-tree意味着数据库中的树形存储方案如下：每个节点不知道其子节点，但子节点存储其到根元素的完整路径：

#root_id #subroot_id # ... #parent_id #this_id

问题在于，如果用户对树进行更改（加载文件、创建新文件夹等），并且服务器接受了这些更改，那么如何通知树需要加载新数据。Element UI 在其文档中没有描述如何捕获事件以导致树的重绘。

客户端树模板

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 />

加载新节点

loadNode: async function (node, resolve) {
try {
  let firstGeneration = await foldersAPI.get(this.$store.state.user.myDrive);
  if (node.level === 0) {
    return resolve(firstGeneration.data.folder.children);
  } else {
    var data;
    if (node.data.hasChildren) {
      let children = await foldersAPI.get(node.data._id);
      console.log(children);
      data = children.data.folder.children;
    } else {
      data = [];
    }
    resolve(data);
  }
} catch (e) {
  console.log(e)
}

- ZulusK

---

我同意，至少我们需要在需要时重新加载元素组件。 - Sang Dang

Answer 1

我的解决方案是通过为树形视图添加v-if属性并创建一个方法来重新渲染树形视图。

reload() {
    this.show = false;
    this.$nextTick(() => {
         this.show = true
    })
}

调用该“reload”函数，可以正确地重新加载树形视图。

- dingoglotz

Answer 2

尝试将计算变量作为树组件的属性传递。计算中的所有更改都会触发树的重新渲染。

- Vladislav Gritsenko

---

但是我使用了懒加载，所以无法使用计算属性。此外，如果我在element-ui树中使用懒加载，就无法从树组件中获取数据。 - Danylkaaa

我尝试将数据数组放入computed中，它可以获取数据并将其放置，但无法将其显示出来。dingoglotz的解决方案对我有用。 - Sang Dang

Answer 3

你可以为组件设置一个 key 属性，然后只需更改 key 的值，组件就会重新渲染。

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 :key="myKey"
 />

阅读文档以获取更多详细信息：https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

- Kai