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

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

(0)

相关推荐

  • 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=&quo

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue v-for中的 input 或 select的值发生改变时触发事件操作

    oninput 用法 <input type="text" id="myInput" oninput="myFunction()"> <script> function myFunction() { } </script> oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id="'m_num'+index" 注意m_num必须用单引号引起来

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

    项目中使用 Treeselect 时,需要获取选项的变化从而触发别的事件,所以需要监听Treeselect 所选择的值. 我使用了watch 来监听 treeselect 绑定的 model ,如果 model 的值发生变化就触发 currDeptChange 事件. <el-form-item prop="deptId" :label="$t('deviceManage.device.table.deptId')+':'"> <treeselec

  • vue如何监听el-select选择值的变化

    目录 监听el-select选择值的变化 方法很简单@change就可以实现 @change绑定了currStationChange el-select将选中的值传递到需要的位置 方法一 方法二 监听el-select选择值的变化 最近项目中需要用到监听 el-select 选择值的改变 方法很简单@change就可以实现 <el-select clearable                        v-model="formData.stationId"      

  • vue监听dom大小改变案例

    需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下.但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把 1.使用element-resize-detector var elementResize

  • vue深度监听(监听对象和数组的改变)与立即执行监听实例

    1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • VUE实时监听元素距离顶部高度的操作

    效果图如下所示 .html <!-- 监听ref距离顶部高度 --> <div ref="pronbit"> <div>今日热门</div> <div>今日热销</div> </div> .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, methods: { handleScrollx() { cons

  • Vue监听属性和计算属性

    目录 一.watch监听属性 1.购物车 2.全选与取消全选 二.计算属性 1.computed 2.methods 3.setter 一.watch监听属性 这个属性用来监视某个数据的变化,并触发相应的回调函数执行. 基本用法添加watch属性,值为一个对象.对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行. 回调函数有2个参数: newVal,数据发生改变后的值. oldVal,数据发生改变前的值. 计数器: <!DOCTYPE html

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • 详解Vue监听数据变化原理

    本人最近在学习Vue,从网上查询了很多关于Vue监听数据变化原理,稍微整理精简一下做下分享. 浅度监听 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浅度监听</title> <meta name="viewport" content="width=device-wi

  • 浅谈VUE监听窗口变化事件的问题

    Vuejs 本身就是一个 MVVM 的框架.但是在监听 window 上的 事件 时,往往会显得 力不从心. 比如 这次是 window.resize恩,我做之前也是百度了一下.看到大家伙都为这个问题而发愁. 问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应. 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这里用的 Vue 2.x .ES6) 解决方案: 第一步: 先在 data 中去 定义 一个记录宽

随机推荐