API: https://vue-treeselect.js.org/#events

1.ids: 即value

1.lable: 需要用到方法：@select(node,instanceId) 和 @deselect(node,instanceId)

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)選擇..."/>

lables：{{DRHA_EFaultModeTree_lables}}

ids:{{DRHA_EFaultModeTree_value}}

// 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

if(node.label == this.DRHA_EFaultModeTree_lables[i]){

this.DRHA_EFaultModeTree_lables.splice(i,1);

}

}

},

}

};

補(bǔ)充知識(shí)：vue Treeselect 下拉樹選擇 問題總結(jié)

情況：

解決方法：

截圖：

問題二：只能選擇最小分類

如圖：

問題三：顯示 分類的個(gè)數(shù)

以上這篇vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持我們。

本文標(biāo)題: vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作

本文地址: http://www.cppcns.com/wangluo/javascript/334530.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。