使用vue实现监听Treeselect选择项的改变的方法

　　介绍

本篇文章给大家分享的是有关使用vue实现监听Treeselect选择项的改变的方法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

项目中使用Treeselect时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect所选择的值。

我使用了手表来监听Treeselect绑定的模型,如果模型的值发生变化就触发currDeptChange事件。

& lt; el-form-item道具=癲eptId" 　　:label=? t (& # 39; deviceManage.device.table.deptId& # 39;) + & # 39;: & # 39;“比;=& lt; treeselect:选择“deptTree" 　　:标准化者=皀ormalizer" 　　v模型=癴ormData.deptId" 　　:占位符=? t (& # 39; deviceManage.device.dlg.deptId& # 39;)“比; 　　& lt;/treeselect> 　　& lt;/el-form-item>

监听Treeselect选择项的改变

看:{//监听deptId
　　& # 39;formData.deptId& # 39;: & # 39; currDeptChange& # 39;
　　},
　　方法:{
　　currDeptChange (val) {
　　console.log (& # 39; currDeptChange& # 39;, val)
　　如果(val) {
　　this.queryStaff ()
　　}
　　},
　　queryStaff () {}
　　}

<>强vue Treeselect树形下拉框:获取选中节点的id和标记

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

1.事件id:即价值

1。标签:需要用到方法:@select(节点,instanceId)和@deselect(节点,instanceId)

使用vue实现监听Treeselect选择项的改变的方法

& lt; template> 　　& lt; treeselect ref=癉RHA_EFaultModeTree" 　　v模型=癉RHA_EFaultModeTree_value" 　　:多个=皌rue" 　　:选项=癉RHA_EFaultModeTree_options" 　　:平=皌rue" 　　:show-count=皌rue" 　　:disable-branch-nodes=皌rue" 　　:可搜索=癴alse" 　　@select=癉RHA_EFaultModeTree_handleSelect" 　　@deselect=癉RHA_EFaultModeTree_handleDeSelect" 　　占位符=?请选择…“/比; 　　 　　& lt; p>标记:{{DRHA_EFaultModeTree_lables}} & lt;/p> 　　& lt; p> id: {{DRHA_EFaultModeTree_value}} & lt;/p> 　　 　　& lt;/template> 　　 　　& lt; script>//导入组件 　　从& # 39;进口Treeselect @riophae/vue-treeselect& # 39;//导入的样式 　　进口& # 39;@riophae vue-treeselect/dist/vue-treeselect.css& # 39; 　　 　　出口默认{ 　　组件:{Treeselect}, 　　数据(){ 　　返回{ 　　 　　DRHA_EFaultModeTree_value:空, 　　DRHA_EFaultModeTree_lables: [], 　　DRHA_EFaultModeTree_options: [{ 　　id: & # 39; 1 & # 39; 　　标签:& # 39;水果# 39; 　　孩子们:[{ 　　id: & # 39; 1 - 1 # 39; 　　标签:& # 39;苹果和# 63;& # 39; 　　isNew:没错, 　　},{ 　　id: & # 39; 1 - 2 # 39; 　　标签:& # 39;葡萄,# 63;& # 39; 　　},{ 　　id: & # 39; 1 - 3 # 39; 　　标签:& # 39;梨,# 63;& # 39; 　　}, { 　　id: & # 39; 1 - 4 # 39; 　　标签:& # 39;草莓,# 63;& # 39; 　　}, { 　　id: & # 39;西瓜# 39; 　　标签:& # 39;西瓜,# 63;& # 39; 　　}), 　　}, { 　　id: & # 39;蔬菜# 39; 　　标签:& # 39;蔬菜# 39; 　　孩子们:[{ 　　id: & # 39;玉米# 39; 　　标签:& # 39;玉米,# 63;& # 39; 　　}, { 　　id: & # 39;胡萝卜# 39; 　　标签:& # 39;胡萝卜,# 63;& # 39; 　　}, { 　　id: & # 39;茄子# 39; 　　标签:& # 39;茄子,# 63;& # 39; 　　}, { 　　id: & # 39;番茄# 39; 　　标签:& # 39;番茄,# 63;& # 39; 　　}), 　　}), 　　}; 　　}, 　　安装:函数(){ 　　 　　}, 　　方法:{ 　　DRHA_EFaultModeTree_handleSelect(节点,instanceId) { 　　console.log(“选择”); 　　this.DRHA_EFaultModeTree_lables.push (node.label); 　　}, 　　DRHA_EFaultModeTree_handleDeSelect(节点,instanceId) { 　　console.log (“DeSelect"); 　　(让我=0;i

以上就是使用vue实现监听Treeselect选择项的改变的方法,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

使用vue实现监听Treeselect选择项的改变的方法