riophae / vue-treeselect Goto Github PK

Hey Fangzhou,

Struggling with vue-treeselect to make it working with options from Vuex store that are fetched in created meth. Looks like treeselect is not reactive:

• Tried regular Vuex way
• tried to get data with Promise than resole it in component where vue-treeselect is used

Any ideas?

When I call a function via '@input = "updateValue"', the function is called every time I redraw the vuetreeselect, I need to change the number of elements when selecting option. How can I do it?

Hey again,

It would be nice to have:

• bold matched strings like: search for enera make bold that partial in General string
• in docs, there is an info about keyboard support but didn't noticed it works
  • first DOWN arrow press should blur from search input to list
  • list nav with UP/DOWN arrows
  • node expand/collapse with LEFT/RIGHT arrows

Thanks for awesome package 🥇

Hi.

Great component!

It would be nice to have an event, that can report an exact option id that was clicked. input doesn't work, because if you have: parent, child1, child2 (selected). Than click child1, input will report all 3 items & it's unknown if user clicked parent or child1.

Thanks.

option默认定义好可以，但是动态获取数据再赋值给option，就不显示了

如果source提前定义在data中那没有问题，但是如果我通过接口返回数据格式化后给source重新赋值，树不触发改变

你好
请问有没有办法重新修改options选项的值，我要多次的去修改，我应该怎么去触发呢

Please add the required prop that will add required="required" to .vue-treeselect__input.

It looks like the input event fires immediately.

Is this correct?

Is there a way to find the selected node, without using the event?

Hi I would like to know how to add also an icon or an image next to the text that identify the node.

thanks!

由于对webpack+vue不太熟悉，所以用了CDN方式，但是不知道应该怎么下手呢？这样做没有显示选择框。

I would like to customize the options adding a new gray sublabel, like count but with my own text. The best solution would probably be a slot that allows the users of this component to change the labels with our own custom HTML:

<treeselect ...>
  <template slot="option" slot-scope="option">
    {{option.label}}
    ...other things i want to customize the label with here...
  </template>
</treeselect>

You can provide a default slot implementation as a fallback, so it's a completely backwards compatible change and only adds new functionality.

Hi, first of all - cool plugin, good job. Anyway got some troubles using it: tried to investigate where is a bug. Let me explain: the problem starts when I change the value manually from outside your plugin, I have connected your plugin with vuex store by using props ":value" (v-model is not used here). On change event I commit and change the value in store. This way I make sure that it is connected to store (sort of two way binding). Everything works as expected until I change "valueFormat" to "object", I keep whole object not only ID, also, there are several levels in a tree. When I change the value from outside, I'm making sure that the value passed to vue-treeselect plugin has changed as well, but somehow/somewhere in components inside your plugin doesn't keep up with this change. I guess it isn't capable to detecting changes of reference type objects. I tried copying it totally using method: JSON.parse(JSON.stringify(value)) - doesn't help it.

Made some pics:
https://ibb.co/bWyfXH (Example before)
https://ibb.co/cXqSCH (Example after) - Here: after changing the value visually there are no changes in component

Would be helpful if you could help solving this issue, everything else is working perfectly..:

Hi. 👋

So, at the moment this wonderful tree is created within a search box, as in you can only see it when you open the search box.

Is it possible to not show a search box and instead to simply display the tree within the page?
It's a lovely feature and I find a lot of the times I really need the tree but want to always show it on the page, rather than hiding behind a search box. 😁

Thanks!

@riophae 您好:
我遇到的第一個問題是，單選的下拉選單會出現unknow的預設文字，然後按旁邊的叉叉，才會變成我placeholder預設的文字，我有看您給別人的回答是更新後就可以了，但我的還是在


我遇到的第二個問題是，我用延遲加載後，想要預設default，所以塞值在v-model裡面，用console看，值有進去，可是在網頁上看還是沒有，一訂要點擊下拉選單，才會出現預設的選項，沒辦法直接顯示
以上兩個問題，請您幫忙解答，非常感謝!

Hello , first of all , what a great component , i really like the documentation .
i am a beginner in vuejs , could you please help me in the events, i did

vm.$on('input', (value, id) => {
  console.log(value, id)
})

but this didn't work , btw i added this in created

Hi! nice component!
In the example "Disabling Branch Nodes", if I press "fra", it does not display only the France. The same with other countries also.

Hi,
Is there a chance of having a refresh method added to the control so that an external component can tell the tree to reload it's options?
Many thanks
Jon

我的数据格式
[{id:'11',label:'222',children:[],num:''}] 这样的数据格式就会有问题

In the documentation @ https://vue-treeselect.js.org/#node the explanation for children says:
Declares a branch node. Set to empty array for no children options. Set to null for delayed loading.

But in my tests it seems as if you have to set children to undefined. If children is an empty array you can expand the item and see an error message saying: "No children options"

Hello, guy, i have a small problem:

• i dont scroll in IE 11 on scrollbar click (dropdown closed when i clicking on scrollbar)

Do u fix it ?

hello, how can I disable an element??

thanks

I have a problem with multiple disable branch nodes.
A three levels tree is not working fine when a item is unselected

https://codepen.io/david-blanco-a/pen/EQXNpL

How to reproduce:

1. select 'aba' (click in it)
2. select 'aaa' (click in it)
3. unselect 'aaa' (click in it)
4. select 'aaa' (click in it)
5. unselect 'aaa' (click in it)
   (You can repite 2 and 3 the times you want)
6. Show the selected values, there are duplicated! ('aba')

hi, @riophae thx for the awesome package but as the title suggested, the documentation and demo site crashed : http://vue-treeselect.js.org/

please help us

Looks like there is a bug where you are passing an option to markdown-it - causing the issue mentioned in #28. I'll push up a PR shortly

On my case, what a I need is to call an Ajax call after the @search-change redefining the options then. But, it seem that setting the options remotely is not permitted.

<template lang="pug">
    treeselect(
        v-model="value"
        :options="options"
        @search-change="searchChange"
    )
</template>

<script>
    export default {
        options: [],
        value: null,
        methods: {
            searchChange () {
                 this.doAjaxRequest().then((body) => {
                     this.options = body.data
                 })
            }
        }
    }
</script>

Doing this way causes the options to be emptied. Am I doing something wrongly or do I have to implement it?

Example:
http://sagalbot.github.io/vue-select/docs/Advanced/Ajax.html

你好，我需要渲染的数据量会很大，所以需要异步的搜索，我尝试监听Input事件来获取用户输入的值并动态的更改option的值，但是我即使动态的更改opttion的值却成功的渲染最新的option值到组件，请问可以提供一些想法或者方案吗？

I want to disable one node whatever level, but there is no way

i use souce options of the doc ,but treeselect show "unknown"?


thank you!

When i need to edit some resource. the treeselect should already have selected a specific value. How can i do this?

:flat="true"是父节点，子节点都会作为选择项,
希望能增加elementUi的tree那样的功能，只取叶子节点的作为选择项。

Currently, if you set the source of the tree before the node information has been received (via ajax), then the id of the node is shown.
1 (unknown)
This is expected since the label data isn't there yet. However, when you open the children of the node, I can see that its pre-selected in the tree area, which is great, but it should also update in the "selected/search area" as soon as you open the parent node and data is loaded.

The problem corrects itself if you un-select the node and re-select the node, which fixes all nodes it has data for.

Hopefully this should be as easy as just calling an update method when we expand the parent.

First of all thank you for a very nice component!
I'm using it in a Laravel application and everything works nicely, but the checkmark is off by a few pixels (see screenshot).

The issue is with the Bootstrap CSS. See the following pen: https://codepen.io/paulheijman/pen/LOVzjP

Can you please have a look at it?

Also, what is the best way to override the default CSS used by treeselect?

Thanks in advance!

树形选择组件绑定的value希望可以配置为一个对象数组,每一个对象里面有个isBranch字段说明这个item是leaf还是branch

I had use $.ajax to get some result, and bind with :option.
But vue-treeselect show me "no options avaliable".
my result's format fits your rules.

• template

<treeselectid='xxx' v-if="modalShow">...</treeselect>
<button @click="rerender"></button>

• script

rerender: function(){
    this.modalShow = false;
    this.modalShow = true;
}

这个方法貌似无效(this method is useless)
或者换而言之，我应该如果在treeSelect的一个生命周期中动态的更改option值, load-root-option只会监听第一次左键点击(in other words, how I can do that I can change the option in dynamic within the
treeselect whole life cycle )

It'd be great if we could ask Vue-Treeselect to keep the placeholder text visible whenever there is no search text specified by the user.

Use case: when I load the page with some options pre-selected, it's not obvious to the user that they can type to search, or where to do so.

Hi,

I am just trying to get the basic example working in my project, I have this in a component file:

<!-- Vue component -->
<template>
    <treeselect
            v-model="value"
            :multiple="true"
            :options="source"
    />
</template>

<script>
    import Treeselect from '@riophae/vue-treeselect'

    export default {
        components: { Treeselect },
        data: {
            value: null,
            source: [
                {
                    id: 'node-1',
                    label: 'Node 1',
                    children: [
                        {
                            id: 'node-1-a',
                            label: 'Node 1-A',
                        },

                    ],
                },
                {
                    id: 'node-2',
                    label: 'Node 2',
                },

            ],
        },
    }
</script>

<style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>

When I load the page, I get:

Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

[Vue warn]: Property or method "source" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <BssTree> at /home/vagrant/code/portal/resources/assets/js/components/bss-tree.vue
       <Root>

[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BssTree> at /home/vagrant/code/portal/resources/assets/js/components/bss-tree.vue
       <Root>

Vue 2.5.13

Am I doing something wrong?

Mick

Documentation from npm : https://docs.npmjs.com/files/package-lock.json

I wanted to contriboot to this repository. I can't because after a fresh git clone, npm i and npm run dev I get :

 ~/contriboots/vue-treeselect > npm run dev

> @riophae/[email protected] dev /Users/ireadyouremails/contriboots/vue-treeselect
> node build/dev-server.js

/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-loader/index.js:155
      throw e;
      ^

Error: /Users/ireadyouremails/contriboots/vue-treeselect/docs/partials/guides.pug:37:5

true is not constant. All filters are rendered compile-time so filter options must be constants.
    at makeError (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-error/index.js:32:13)
    at /Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:100:15
    at Array.forEach (native)
    at getAttributes (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:95:14)
    at walk.includeDependencies (/Users/ireadyouremails/contriboots/vue-treeselect/node_modules/pug-filters/lib/handle-filters.js:17:19)

Hi, The document show that option must be use id and label as the key name, can i configure them?

Greetings,

The value of my options is initially null, but inside this component I'll change this value through the server. How do I assign values to my options after changing? I found that I can not now show the data to options after the data has been modified.

Thanks so much

用的是文档中的options source，但是展示结果如上图 无法使用
Thank You!

What i want to achieve is the ability to search with parents included.

Imagine this list:

• A
  • 1
  • 2
  • 3
• B
  • 1
  • 2
  • 3

If i search for 1 i got 2 matches.
What i want is the ability to search for A 1 and get only 1 result.

I already implemented this feature in my fork and could provide a PR after i updated the docu and the tests.

This is my name for that new prop:

{
        name: 'searchNested',
        type: 'Boolean',
        defaultValue: v('false'),
        description: `Set true if the searchquery should search in all parent nodes to. For example Children->Mike will match "ch ke"`,
      }

Is this something you want?
Or do you need more info on this?

I would be glad to help you with this amazing useful component!

Hi,

I am trying to drop your control into a Bootstrap navbar. (A bit like the search box on Github).

It would be fantastic if it was as easy as this:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_form&stacked=h

Is this something you would be interested in doing? I imagine that other people would also desire this.

Thanks,

Mick

Although its a cool feature, is there a way to disable the combining of nodes into the parent node? I would like to keep them all as leaf nodes.

For example on the teaser image on the read me, If you select "Apple, Grapes, Pears" I would like to keep them all as leafs instead of combining them into the "Fruit" parent.

How can I disable this?

Hi,
With some of my controls if you are editing an item in a self referencing tree then I use a tree for selecting the parent. I would like to be able to disable the selection of a child element. So it would be nice if the control allowed the options node array to have a disabled or blocked value that would prevent the selection of that item - but allow any that had the value set to false.

Hopefully thats understandable :)

Many thanks
Jon

目前看文档每个节点包含：id，label。能否包含其他的信息？能否自定义字段名称？。例如：ID,Name，Icond等。最好把每个节点的信息处理为一个对象，对象里的属性就可以自定了。

作者你好，options是ajax获取的，选项无法显示，该怎么做？