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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
原生js实现下拉选项卡
Nov 27 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
建立动态的WML站点(三)
2006/10/09 PHP
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js右键菜单效果代码
2007/07/21 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
2014年基建工作总结
2014/12/12 职场文书
全陪导游词
2015/02/04 职场文书
会计求职简历自我评价
2015/03/10 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
聘用合同范本
2015/09/21 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS