Vue Element.ui树，发出重新加载事件

Question

我在Vue上创建了一个SPA (类似于云磁盘)，使用Element.ui树组件来显示文件夹树。问题是树本身并不是一次加载所有的东西，而是在惰性修饰符的帮助下按顺序加载。

服务器部分是猫鼬+猫鼬路径树.使用猫鼬路径树意味着下一个是数据库中的树存储方案:每个节点不知道它的子节点，但是子节点存储到根元素的全部路径：

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

问题是，如果用户对树进行更改(加载文件，创建新文件夹，等等)。服务器接受它们，然后如何通知树它需要加载新的数据。元素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)
}

Answer 1

我的解决方案是将v-if属性添加到treeview中，然后创建一个方法，从而重新修改treeview。

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

调用该重新加载函数，然后正确地重新加载treeview

Answer 2

尝试将计算变量作为树组件的支柱传递。计算中的所有更改都将触发树的重发。

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