vue Treeselect树形下拉框之获取选中节点的ids和lables操作

发布时间:2025-03-07 点击:29
【相关学习推荐: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=" 请选择..."/> <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>补充知识:vue treeselect 下拉树选择 问题总结
情况:
解决方法:
截图:
问题二:只能选择最小分类
如图:
问题三:显示 分类的个数
相关学习推荐:编程视频

关于域名续费-域名及账户问题
请问在恢复数据库是出错是什么原因
是不是服务器的问题我打开网站就要一分多钟甚至更慢帮我查看下谢
重庆联通服务器租用口碑佳云主机
高防云服务器租用方案
网站被黑要如何解决又要怎么预防
云服务器买哪个版本
收到勒索邮件-企业邮局