VueTreeselect 插件使用

37 篇文章 0 订阅
17 篇文章 0 订阅

VueTreeselect 地址:https://www.vue-treeselect.cn/

使用@select监听树形下拉选中事件:
在这里插入图片描述

<template slot-scope="scope">
 <treeselect 
    v-model="scope.row.departId" 
    @select="departTreeSelected"
    :disable-branch-nodes="false" 
    :show-count="false" 
    :multiple="false" 
    :options="departs"  
    placeholder="请选择"/>
  </treeselect>
 </template>

在methods里定义函数接收参数node和instanceId
在这里插入图片描述

methods: {
	 //选中树形部门选项
    departTreeSelected(node,instanceId){
      let url = '/datas/staff/busiselect?departCode=' +  node.code;
      let _this = this;
      this.$http.get(url).then(res => {
        if(res.data.code==0){
          var datas = res.data.data;
          for(let item in datas) {
            //出差申请人数组
            _this.staffArr.push({
             value: item,
             label: datas[item].match(/(\S*)-/)[1] //截取'-'前面内容作为人员姓名
            })
            //职级数组
            _this.rankArr.push({
              value: item,
              rank: datas[item].match(/-(\S*)/)[1] //截取'-'后面内容作为职级id
            })
          }
        }
      })
      .catch(err => {
        return err;
      });
    },
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Treeselect是一个基于Vue.js的简单易用的树形下拉框组件,可以实现快速创建和维护包含复杂数据结构的表单。在使用Vue Treeselect时,可能会遇到需要清空选中项的情况,例如,在表单提交完成或者用户需要更改选择时,需要清空之前的选中项,这个时候要如何实现呢? Vue Treeselect提供了相应的清空事件onClear(),来满足这一需求。下面来详细介绍vue treeselect清空事件。 1、首先,在Vue Treeselect中,我们需要在页面中引入该组件。在组件中添加一个treeselect标签,并绑定一些需要的属性,如options、multiple、value等。其中,multiple代表是否可以多选,options代表下拉框的选项内容,value代表当前选中的内容,具体绑定方式可以参考Vue Treeselect官方文档。 2、当需要清空选中项时,在Vue Treeselect组件中添加onClear事件,并指定相应的处理函数。onClear事件将在清空选项时触发。事件函数中,我们可以通过调用Treeselect对象中的clear()方法来实现清空选中项的功能。例如,可以这样书写: <vue-treeselect v-model="selected" :multiple="true" :options="options" :searchable="true" :clearable="true" @clear="onClear" > methods: { // 清空选中项处理函数 onClear() { this.$refs.treeselect.clear(); } } 3、上述代码中,我们在Vue的methods选项中定义了一个名为onClear()的方法,它将被当作清空选中项的处理函数,当Vue Treeselect触发了清空事件clear时,该函数会被自动调用。 需要注意的是,上述代码中的clear()方法是Vue Treeselect内置提供的方法,用于清空选中项,而 $refs.treeselect 代表的是在页面中引用Vue Treeselect组件时的ref属性。所以,我们可以通关$refs.treeselect来访问组件内部的方法。 Vue Treeselect清空事件的实现非常简单,只需要在Vue Treeselect组件中添加onClear事件,并在处理函数中调用Treeselect对象的clear()方法即可。选择Vue Treeselect这个插件,不仅可以让表单开发变得更加简单和高效,同时也具有很好的扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值