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

Posted 2023-02-22

【中文标题】Vue Element.ui 树，发出重新加载事件

【英文标题】：Vue Element.ui tree, emit reload event

【发布时间】：2018-05-31 00:32:49

【问题描述】：

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

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

#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)

【问题讨论】：

我同意至少我们需要一些东西来在需要时重新加载 Element 组件。

【参考方案1】：

我的解决方案是通过将 v-if 属性添加到树视图然后创建一个方法来简单地重新呈现树视图

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

调用该重新加载函数然后正确地重新加载树视图

【参考方案2】：

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

【讨论】：

但是我使用延迟加载，所以我不能使用计算道具。 Ecsual，如果我对 element-ui 树使用延迟加载，我无法从树组件获取数据

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

【参考方案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://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key