Get the selected item in iView's TreeView

Question

Get the selected item in iView's TreeView

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I need to get the reference of the selected item in TreeView of iView , already tried with getSelectedNodes() but it seems the method is not being used correctly, 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 I can instantiate an event of click for each item.

vue.js treeview vue.js-2

asked by anonymous 05.02.2018 / 00:37

2 answers

0

I've achieved but I'm not sure if it's the best way to do ...

    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 instantiated a render that returns root , node and data , being data the reference of the item.

07.02.2018 / 13:59

Inserting data in sql after validation Script to search for prices on various sites

score 1 · Accepted Answer

Side note: I'm active member of iView. And I'm happy to help with related questions but I do not always see them in time.

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

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>