vueelementuiel-formrules动态验证的实例代码详解-创新互联

一、介绍

创新互联是专业的蓟州网站建设公司，蓟州接单;提供网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行蓟州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

图片介绍：

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

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

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

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

代码介绍：

// elementui信息


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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前题目：vueelementuiel-formrules动态验证的实例代码详解-创新互联
转载注明：http://cdkjz.cn/article/dodoei.html