Get the selected item from iView’s Treeview

Asked

Viewed 130 times

1

I need to get the reference of the selected item on TreeView of iView, I’ve tried with getSelectedNodes() but it seems that the method is not being used properly, and the documentation does not help much...

    var Main = {
        data () {
            return {
                data1: [
                    {
                        title: 'parent 1',
                        expand: false,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: false,
                                children: [
                                    {
                                        title: 'leaf 1-1-1'
                                    },
                                    {
                                        title: 'leaf 1-1-2'
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: false,
                                children: [
                                    {
                                        title: 'leaf 1-2-1'
                                    },
                                    {
                                        title: 'leaf 1-2-1'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        },
        methods : {
          getSelectedNodes (el) {
            console.log(el);
          }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <tree :data="data1"></tree>
</div>

If possible, I would also like to know, how can I instantiate an event of click for each item.

vue.js treeview vue.js-2

  • Apart: comments here or there that part of the documentation you find insufficient for us to improve.

  • @Sergio, congratulations on the project, in relation to documentation, I found it vague in the session TreeView and I may be wrong but where is the method on-select-change the title is as 'Tree Events' and getCheckedNodes under the title 'Tree methods', getCheckedNodes I was putting in methods, and on-select-change imagined as a directive...

2 answers

1


Note aside: I am active member iView. And I’m happy to help with related questions but I don’t always see them in time.

You can use the @on-select-change to know which elements are selected when one of them is selected/de-selected, and you can also use the getSelectedNodes but in that case you need a reference to the:

const tree = this.$refs.tree;
const allSelected = tree.getSelectedNodes();

Example:

var Main = {
  data() {
    return {
      data1: [{
        title: 'parent 1',
        expand: true,
        children: [{
            title: 'parent 1-1',
            expand: true,
            children: [{
                title: 'leaf 1-1-1'
              },
              {
                title: 'leaf 1-1-2'
              }
            ]
          },
          {
            title: 'parent 1-2',
            expand: false,
            children: [{
                title: 'leaf 1-2-1'
              },
              {
                title: 'leaf 1-2-1'
              }
            ]
          }
        ]
      }]
    }
  },
  methods: {
    onSelectChange(selected) {
      console.log('onSelectChange', selected);
    },
    onCheckSelected() {
      const tree = this.$refs.tree;
      const allSelected = tree.getSelectedNodes();
      console.log('allSelected:', allSelected);
    }
  }
}

var Component = Vue.extend(Main)
new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <tree :data="data1" multiple @on-select-change="onSelectChange" ref="tree"></tree>
  <i-button @click="onCheckSelected">Saber todos os selecionados</i-button>
</div>

0

I did it but I’m not sure it’s the best way to do it...

    var Main = {
        data () {
            return {
            		estiloFilhosTree : {
                  color: 'white',
                  cursor: 'pointer',
                  background: '#424242',
                  padding: '1px 4px',
                  letterSpacing: '1px',
                  fontSize : '11px'
                },
                data1: [
                    {
                        title: 'MARGIN',
                        expand: false,
                        render : (h, {root, node, data}) => {
                        	return h('span', {
                            style : this.estiloFilhosTree,
                             on: {
                              click: () => { console.log(data.title) }
                             }
                            }, data.title) 
                        },
                        children: [
                            {
                                title: 'MARGIN-TOP',
                                expand: false,
                                render : (h, {root, node, data}) => {
                                  return h('span', {
                                    style : this.estiloFilhosTree,
                                     on: {
                                      click: () => { console.log(data.title) }
                                     }
                                    }, data.title) 
                                }
                            },
                            {
                                title: 'MARGIN-BUTTON',
                                expand: false,
                                render : (h, {root, node, data}) => {
                                  return h('span', {
                                    style : this.estiloFilhosTree,
                                     on: {
                                      click: () => { console.log(data.title) }
                                     }
                                    }, data.title) 
                                }
                            }
                        ]
                    },
                    {
                        title: 'PADDING',
                        expand: false,
                        render : (h, {root, node, data}) => {
                        	return h('span', {
                            style : this.estiloFilhosTree,
                             on: {
                              click: () => { console.log(data.title) }
                             }
                            }, data.title) 
                        },
                        children: [
                            {
                                title: 'PADDING-TOP',
                                expand: false,
                                render : (h, {root, node, data}) => {
                                  return h('span', {
                                    style : this.estiloFilhosTree,
                                     on: {
                                      click: () => { console.log(data.title) }
                                     }
                                    }, data.title) 
                                }
                            },
                            {
                                title: 'PADDING-BUTTON',
                                expand: false,
                                disabled : true,
                                render : (h, {root, node, data}) => {
                                  return h('span', {
                                    style : this.estiloFilhosTree,
                                     on: {
                                      click: () => { console.log(data) }
                                     }
                                    }, data.title) 
                                },
                        				children: [{
                                	title: 'oi'
                           		 	}]
                             }   
                        ]
                    }
                ]
            }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <tree :data="data1"></tree>
</div>

For each item, I instated a render that returns root, node and data, being data the item reference.

Browser other questions tagged vue.js treeview vue.js-2

You are not signed in. Login or sign up in order to post.