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

 更新时间:2020-09-01 01:05:30   作者:佚名   我要评论(0)

项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值。
我使用了watch 来监听 treeselect 绑定的 model ,如果 mod

项目中使用 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)

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

您可能感兴趣的文章:
  • vue select选择框数据变化监听方法
  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
  • Vue v-for中的 input 或 select的值发生改变时触发事件操作

相关文章

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

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

    项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值。 我使用了watch 来监听 treeselect 绑定的 model ,如果 mod
    2020-09-01
  • vue treeselect获取当前选中项的label实例

    vue treeselect获取当前选中项的label实例

    我就废话不多说了,大家还是直接看代码吧~ <treeselect :placeholder="$t('taskManage.lockTask.selDeptId')" :options="deptTree"
    2020-09-01
  • vue Treeselect下拉树只能选择第N级元素实现代码

    vue Treeselect下拉树只能选择第N级元素实现代码

    今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档 https://vue-treeselect.js.org/#disable-item-selection 然后看
    2020-09-01
  • C# 如何解析获取Url参数值

    C# 如何解析获取Url参数值

    今天遇到一个需求,需要处理通过接口传过来的一个参数,参数内容为一个拼接好的Url地址,且该地址还会携带了一些额外的参数,包括但不限于数字,字符串,json串。样
    2020-09-01
  • Python Matplotlib绘图基础知识代码解析

    Python Matplotlib绘图基础知识代码解析

    1.Figure和Subplot import numpy as np import matplotlib.pyplot as plt #创建一个Figure fig = plt.figure() #不能通过空figure绘图,必须使用add_subplot创
    2020-09-01
  • Python动态类型实现原理及过程解析

    Python动态类型实现原理及过程解析

    在python中,我们使用变量时,并没有声明变量的存在和类型。类型是在运行过程中自动决定的。 a = 3 python将会执行三步去完成上面这个请求。 1.创建一个对象代表
    2020-09-01
  • Python Opencv图像处理基本操作代码详解

    Python Opencv图像处理基本操作代码详解

    1.图像读取 使用cv2.imread(filepath,flags)读入图像 filepath: 读入图像完整路径(绝对路径,相对路径) flags: 读入图像标志 cv2.IMREAD_COLOR:默认
    2020-09-01
  • Spring Boot 集成 Sharding-JDBC + Mybatis-Plus 实现分库分表功能

    Spring Boot 集成 Sharding-JDBC + Mybatis-Plus 实现分库分表功能

    一、 Sharding-jdbc简介 “ Sharding-jdbc是开源的数据库操作中间件;定位为轻量级Java框架,在Java的JDBC层提供的额外服务。它使用客户端直连数据库,以jar包形式
    2020-08-27
  • 解决SpringBoot jar包中的文件读取问题实现

    解决SpringBoot jar包中的文件读取问题实现

    前言 SpringBoot微服务已成为业界主流,从开发到部署都非常省时省力,但是最近小明开发时遇到一个问题:在代码中读取资源文件(比如word文档、导出模版等),本地开
    2020-08-27
  • js实现批量删除功能

    js实现批量删除功能

    本文实例为大家分享了js实现批量删除功能的具体代码,供大家参考,具体内容如下 界面如下: 勾选复选框会自动记录id,设置value=“id”即可 下面是全选操作(js)
    2020-08-27

最新评论