element-ui+vue-treeselect下拉框的校验过程

 更新时间:2022年07月26日 09:56:23   作者:喵大叔、  
这篇文章主要介绍了element-ui+vue-treeselect下拉框的校验过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element-ui+vue-treeselect下拉框的校验(ivew也适用)

在项目开发中 使用了vue-treeselect的话,使用element-ui或者ivew自带的表单校验发现,trigger中blur和change均不生效,在选择了值之后验证依然存在

解决方法主要是使用vue-treeselect官网中api给出的事件中的input,在value改变后触发,将trigger设为blur

以下代码示例为ivew UI

		 <FormItem label="选择父级分类:" prop="classify">
	          <treeselect
	            style="width:250px"
	            v-model="formItem.classify"
	            :normalizer="normalizer"
	            :options="options"
	            @input="changeValue"
	            noOptionsText="暂无数据"
	            placeholder="请选择分类"
	          />
        </FormItem>
		<script>
		data(){
			return{
				// 表单验证规则
				 ruleValidate: {
				        classify: [
				          {
				            required: true,
				            type: "string",
				            message: "请选择分类",
				            trigger: "input" /*看这里*/
				          }
				        ]
			 		}
			}
		}
		
		// 方法
		methods:{
			changeValue() {
	     		 this.$refs["Form"].validateField("classify");
	   		 },
		}
		
		</script>

vue-treeselect的插件使用

vue-treeselect地址: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;
      });
    },
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 脚手架vue-cli工程webpack的作用和特点

    脚手架vue-cli工程webpack的作用和特点

    webpack是一个模块打包的工具,它的作用是把互相依赖的模块处理成静态资源。这篇文章主要介绍了vue-cli工程webpack的作用和特点,需要的朋友可以参考下
    2018-09-09
  • 使用Vue+ElementUI动态生成面包屑导航教程

    使用Vue+ElementUI动态生成面包屑导航教程

    Vue和ElementUI都是非常流行的前端开发框架,它们可以让我们更加便捷地开发前端应用,下面这篇文章主要给大家介绍了关于使用Vue+ElementUI动态生成面包屑导航的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue实现模糊查询-Mysql数据库数据

    Vue实现模糊查询-Mysql数据库数据

    这篇文章主要介绍了基于Vue实现Mysql数据库数据模糊查询,下面文章我们主要实现的是输入框中输入数据,根据输入的结果模糊搜索数据库对应内容,实现模糊查询,感兴趣的小伙伴可以进入文章我们一起学习
    2021-12-12
  • vue路由警告:Duplicate named routes definition问题

    vue路由警告:Duplicate named routes definition问题

    这篇文章主要介绍了vue路由警告:Duplicate named routes definition问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3纯前端表格数据的导出与导入实现方式

    vue3纯前端表格数据的导出与导入实现方式

    这篇文章主要介绍了如何在纯前端环境下使用xlsx-js-style库进行Excel表格文件的下载,并自定义样式,还提到了使用xlsx库进行Excel表格数据的导入,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-01-01
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue组件间通信六种方式(总结篇)

    vue组件间通信六种方式(总结篇)

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了vue组件间通信六种方式,需要的朋友可以参考下
    2019-05-05
  • web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu解决

    web前端Vue报错:Uncaught (in promise) TypeError:Cannot read 

    这篇文章主要给大家介绍了关于web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • vue中如何引入jest单元测试

    vue中如何引入jest单元测试

    这篇文章主要介绍了vue中如何引入jest单元测试问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue3 路由配置与导航实战教程

    Vue3 路由配置与导航实战教程

    Vue Router 提供了强大的路由管理能力,帮助开发者轻松构建流畅、高效的单页应用,本文将带你深入探讨 Vue3 中的路由配置与导航操作,从安装到实战,手把手教你掌握 Vue Router 的使用技巧,需要的朋友可以参考下
    2025-03-03

最新评论