VueTreeselect 插件使用

最新推荐文章于 2025-11-12 07:25:59 发布

原创最新推荐文章于 2025-11-12 07:25:59 发布 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

前端同时被 3 个专栏收录

56 篇文章

订阅专栏

37 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用VueTreeselect组件实现树形下拉选择，并通过@select事件监听用户选择行为，动态获取并处理部门及员工数据。

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;
      });
    },
}