vue 监听 Treeselect 选择项的改变操作


Posted in Javascript onAugust 31, 2020

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

我使用了watch 来监听 treeselect 绑定的 model ,如果 model 的值发生变化就触发 currDeptChange 事件。

<el-form-item prop="deptId"
          :label="$t('deviceManage.device.table.deptId')+':'">
    <treeselect :options="deptTree"
          :normalizer="normalizer"
          v-model="formData.deptId"
          :placeholder="$t('deviceManage.device.dlg.deptId')">
    </treeselect>
</el-form-item>

监听 Treeselect 选择项的改变

watch: {
  // 监听deptId
  'formData.deptId': 'currDeptChange'
},
methods: {
  currDeptChange(val) {
   console.log('currDeptChange', val)
   if (val) {
    this.queryStaff()
   }
  },
  queryStaff() {}
}

补充知识:vue Treeselect 树形下拉框 : 获取选中节点的ids和lables

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

1.ids: 即value

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

vue 监听 Treeselect 选择项的改变操作

<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 选择项的改变操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
js对象的复制继承实例
Jan 10 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
vue组件中实现嵌套子组件案例
Aug 31 #Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 #Javascript
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP实现验证码校验功能
2017/11/16 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python实现识别图片内容的方法分析
2018/07/11 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
清华大学自主招生自荐信
2014/01/29 职场文书
八一演出活动方案
2014/02/03 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
表彰会主持词
2014/03/26 职场文书
申论倡议书范文
2014/05/13 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
员工工作表扬信
2015/05/05 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers