vue elementui el-form rules动态验证

最新推荐文章于 2025-04-11 22:33:13 发布

CoderYin

最新推荐文章于 2025-04-11 22:33:13 发布

阅读量2.4w

点赞数 8

分类专栏： vue 文章标签： vue rules

本文链接：https://blog.csdn.net/CoderYin/article/details/89312417

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

vue elementui el-form rules动态验证

一、介绍

简介：在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。

图片介绍：

1、在用户选择单选或多选时会有A,B,C,D,E五个选项

2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）

问题引入：当用户选择不同的题库时会产生不同的form表单选项，这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断，这个时候就需要两个rules来动态进行表单校验。

解决方法：在页面加载的时候在computed方法中进行动态判断直接返回赋值。

代码介绍：

// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>

// data中定义rules
updateQusRulesSel:[];
updateQusRules:[];

// computed方法
computed: {
// this.updateQusTable.showSelect自己定义的标识
    updateQusRulesList: function() {
        if (this.updateQusTable.showSelect) {
		    return this.updateQusRulesSel;
	    } else {
		    return this.updateQusRules;
    }
}

总结：在computed中进行值绑定，当该表单显示的时候就会触发(一开始是隐藏的)，如果一开始页面加载的时候就触发会无法进行值判断，从而报错。其实能解决问题，通过该种方法。