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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
一页面多XMLHttpRequest对象
Jan 22 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
ES6对象操作实例详解
May 23 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
机关财务管理制度
2014/01/17 职场文书
七一党日活动总结
2014/07/08 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
党员年终个人总结
2015/02/14 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL