How to use Fold Plugin. about he-tree-vue HOT 25 CLOSED

import {walkTreeData} from 'he-tree-vue'
...
getItemgroupsTree() {
                Itemgroup.fetchTree(308)
                    .then(data => {
                        this.item_groups_tree = data.item_groups_tree;
                        walkTreeData(this.item_groups_tree, node => {
                            this.$set(node, '$folded', true)
                        })
                    })
                    .catch(error => {});
            },

from he-tree-vue.

foldAllAfterMounted is false default, so the children tree is unfolded default. so your code is equal to default.
The follow code will fold all after mounted

<Tree :value="treeData" foldAllAfterMounted>

from he-tree-vue.

Here is my updated code:

<Tree :value="item_groups_tree" foldAllAfterMounted>
    <span slot-scope="{node, index, path, tree}">
      <b @click="tree.toggleFold(node, path)">
        {{node.$folded ? '+' : '-'}}
      </b>
        {{node.Name + ' ('+node.SystemKey+')'}}
    </span>
</Tree>

Here is the output image. foldAllAfterMounted is true now but didn't collapse the tree.

from he-tree-vue.

The tree mounted, then it try fold existed data. The data added after that will not be folded. The source code is at fold.js like follow:

mounted() {
    if (this.foldAllAfterMounted) {
      this.foldAll()
    }
  },

So you can call tree.foldAll() manually.

from he-tree-vue.

Thanks so much for your reply.

I tried to use tree.foldAll() in mounted() and template. but didn't work. Could you please show me how I could use tree.foldAll().

from he-tree-vue.

Template

<Tree :value="item_groups_tree" ref="tree">
...
</Tree>

In script

this.$refs.tree.foldAll()

from he-tree-vue.

Thanks again. But I am sorry it's didn't work for me :(

from he-tree-vue.

can you show the code?

from he-tree-vue.

Here is my code:

Templaste:

<Tree :value="item_groups_tree" ref="tree">
    <span slot-scope="{node, index, path, tree}">
      <b @click="tree.toggleFold(node, path)">
        {{node.$folded ? '+' : '-'}}
      </b>
        {{node.Name + ' ('+node.SystemKey+')'}}
    </span>
</Tree>

Script:

mounted() {

    //this.$refs.tree.foldAll();

    if (this.foldAllAfterMounted) {
        this.$refs.tree.foldAll();
    }
}

I am also tried to call this.$refs.tree.foldAll(); after init item_groups_tree data variable.

from he-tree-vue.

mounted() {
  this.$refs.tree.foldAll();
}

is it works?

from he-tree-vue.

Sorry it is not working.

from he-tree-vue.

when is item_groups_tree ready? tree.foldAll() will walk all nodes and set $folded of each node to true. so the data must be ready before foldAll called.

from he-tree-vue.

I am also assumed that. I don't understand why it's not working?

from he-tree-vue.

check App.vue in this: https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-k2d11
foldAllAfterMounted works well

from he-tree-vue.

Hi,

Thanks so much for your solutions. I flow like your component design TreeView. When I call tree.foldAll() inside of the overrideSlotDefault() method then It folds all the tree node.

But the problem is when I return this content it's print as text like the below image.

overrideSlotDefault({ node, index, path, tree }, original) {
    tree.foldAll();
    let html =
        `<button class="mrs fold-btn" @click="${tree.toggleFold(node, path)}">${node.$folded ? "+" : "-"} </button> ${node.Name}
       `;
    return html;
    //return ((node.$folded ? "+" : "-") + node.Name);
}

If I return this ((node.$folded ? "+" : "-") + node.Name) then the view like this:

But If I try to use your implementation from here:( https://codesandbox.io/s/vue-cli-and-he-tree-vue-example-k2d11) then I got an error. I am using Vue inside Laravel app.
Here is the error image:

from he-tree-vue.

tree.foldAll() fold all nodes. So just get the tree and execute after your data ready. such as:

httpGetData().then(data => {
this.myTreeData = data
this.$refs.tree.foldAll()
})

overrideSlotDefault is to custom node render. It should return jsx. It will be often called, so the foldAll shoud not be in it.

from he-tree-vue.

Sorry, there is a bug.

from he-tree-vue.

Oh, Could you please tell me what I will do now about this matter.

from he-tree-vue.

this.myTreeData = data
this.$refs.tree.foldAll()

In this, tree will fold old data because the prop is not updated immediately. But if put this.$refs.tree.foldAll() in nextTick, the DOM will flash once.

So walk new data and set $folded=true

import {walkTreeData} from 'he-tree-vue'

httpGetData().then(data => {
  this.myTreeData = data
  walkTreeData(data, node => {this.$set(node, '$folded', true)})
})

from he-tree-vue.

Sorry, maybe I confused you. I just told that tree.foldAll() only work from overrideSlotDefault() method not from Http get request method.

from he-tree-vue.

Is your data defined in component or get asynchronously such as by ajax?

from he-tree-vue.

Data getting by asynchronously using ajax.

from he-tree-vue.

can you show get data and assignment part?

from he-tree-vue.

Here is my component code: https://paste.ubuntu.com/p/nhfBnyK3N7/
and here is the model axios call method:

    static fetchTree(company_id) {

        return new Promise((resolve, reject) => {

            axios.post('/web-api/e-commerce/itemgroups/tree', {
                companyId: company_id,
            })
                .then(({data}) => {

                    resolve(data);

                })
                .catch(error => {
                    reject(error);
                });

        });
    }

from he-tree-vue.

Thanks so much. It's working now and I made a mistake with walkTreeData. anyways thanks again for your wonderful support.

from he-tree-vue.