Vue Element.ui tree, emit reload event

Question

I create a SPA on Vue (something like a cloud disk), using the Element.ui tree component, to display the folder tree. The problem is that the tree itself does not load everything at once, but is loaded sequentially with the help of the lazy modifier.

The server part is mongoose + mongoose-path-tree. The use of the mongoose-path-tree means, that a tree storage scheme in the database is next: each node does not know about its children, but the children store their full path to the root element:

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

The problem is that if the user makes changes to the tree (loads the file, creates a new folder, etc.) and the server accepts them, then how to notify the tree that it needs to load new data. Element ui in its documentation does not describe how to capture an event to cause the redrawing of a tree.

Client tree template

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

Loading new nodes

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

I agree that at least we need something to reload Element components when we need. — Sang Dang, Mar 23 '18 at 07:42

score 5 · Answer 1 · answered Jan 11 '18 at 14:11

My solution was to simply rerender the treeview by adding the v-if attribute to the treeview and then creating a method

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

Calling that reload function then properly reloads the treeview

score 0 · Answer 2 · answered Jan 16 '18 at 15:46

0

Try to pass computed variable as prop for tree component. All changes in computed will trigger rerender of tree.

answered Jan 16 '18 at 15:46

Vladislav Gritsenko

762
4
16

But I use lazy load, so I can't use computed props. Ecsual, I can't get data from tree component, if I use lazy load with element-ui tree – Danylkaaa Jan 17 '18 at 17:02
I tried to put data array into computed, it can get the data, put it up, but cannot display them out. dingoglotz's solution works for me. – Sang Dang Mar 23 '18 at 07:39

score 0 · Answer 3 · edited Jul 15 '22 at 01:47

you can set a key property to the component, and then, just change the key value, the component will re-render.

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

read the doc for more details: https://v2.vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

Vue Element.ui tree, emit reload event

3 Answers3