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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
js获取php变量的实现代码
Aug 10 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue-父子组件和ref实例详解
Nov 10 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vant时间控件使用方法详解
2020/12/24 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
Python中的面向接口编程示例详解
2021/01/17 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
室内设计实习自我鉴定
2013/09/25 职场文书
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
二年级评语大全
2014/04/23 职场文书
公务员诚信承诺书
2014/05/26 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js