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>
Logo

前往低代码交流专区

更多推荐