【相關(guān)學(xué)習(xí)推薦：js視頻教程】
api: https://vue-treeselect.js.org/#events
1.ids: 即value
1.lable: 需要用到方法：@select(node,instanceid) 和 @deselect(node,instanceid)
<template><treeselect ref="drha_efaultmodetree" v-model="drha_efaultmodetree_value" :multiple="true" :options="drha_efaultmodetree_options" :flat="true" :show-count="true" :disable-branch-nodes="true" :searchable="false" @select="drha_efaultmodetree_handleselect" @deselect="drha_efaultmodetree_handledeselect" placeholder=" 請(qǐng)選擇..."/> <p>lables：{{drha_efaultmodetree_lables}}</p> <p>ids:{{drha_efaultmodetree_value}}</p> </template> <script> // import the component import treeselect from '@riophae/vue-treeselect' // import the styles import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { components: { treeselect }, data() { return { drha_efaultmodetree_value: null, drha_efaultmodetree_lables: [], drha_efaultmodetree_options: [ { id: '1', label: 'fruits', children: [ { id: '1-1', label: 'apple ?', isnew: true, }, { id: '1-2', label: 'grapes ?', }, { id: '1-3', label: 'pear ?', }, { id: '1-4', label: 'strawberry ?', }, { id: 'watermelon', label: 'watermelon ?', } ], }, { id: 'vegetables', label: 'vegetables', children: [ { id: 'corn', label: 'corn ?', }, { id: 'carrot', label: 'carrot ?', }, { id: 'eggplant', label: 'eggplant ?', }, { id: 'tomato', label: 'tomato ?', } ], } ], }; }, mounted: function(){ }, methods: { drha_efaultmodetree_handleselect(node,instanceid){ console.log("select"); this.drha_efaultmodetree_lables.push(node.label); }, drha_efaultmodetree_handledeselect(node,instanceid){ console.log("deselect"); for (let i = 0;i<this.drha_efaultmodetree_lables.length;i ){ if(node.label == this.drha_efaultmodetree_lables[i]){ this.drha_efaultmodetree_lables.splice(i,1); } } }, } };</script>補(bǔ)充知識(shí)：vue treeselect 下拉樹選擇 問(wèn)題總結(jié)
情況：
解決方法：
截圖：
問(wèn)題二：只能選擇最小分類
如圖：
問(wèn)題三：顯示 分類的個(gè)數(shù)
相關(guān)學(xué)習(xí)推薦：編程視頻