vue + element-ui el-form-item循环校验及 el-table和el-form表单校验嵌套使用_el-form-item 嵌套el-form-item-程序员宅基地

无论是单纯的form-item循环还是把form-item放到表格的td中,其实都是在循环每个form-item,
校验的方式有如下两种:

第一种 可以无限循环无限嵌套,支持同步异步 更加灵活 拓展性更强


<el-form
ref="formMsg"
label-width="0px"
class="form--label28"
:model="formMsg"
>
	<div
		class="card-wrapper p20 mb20"
		v-for="(item, index) in formMsg.list"
		:key="index"
	>
	<el-form-item
		label="用途"
		:prop="'formMsg.' + index + '.type'"
		:rules='[{
    
		required: true,
		trigger: "change",
		message: `请选择用途`
		},{
    
			validator: validateType, trigger: "change"
		}]'
	>
		<el-select
			v-model="item.type"
			:options="options"
			placeholder='请选择用途'
		/>
	</el-form-item>
	</div>
</template>
</el-form>

注意: 绑定在el-form-item上的prop是唯一的 一一对于的 string类型的


data(){
    
	return {
    
		formMsg: {
    
			list: [
				{
    
					type:''
				},
				{
    
					type:''
				}
			]
		  }
	}
},

methods: {
    
//这里的校验可以是同步的也可以是异步的
 async validateType(rule, value, callback) {
    
 const param = {
    };
 const request = await $apis.XXX.XXXX(param)
	const {
     code, msg } = request.data;
	if (code == 1000) {
    
		callback();
	} else {
    
		callback(new Error(msg));
	}
},
submit(){
    
	this.$refs.formMsg.validate((valid) => {
    
		if (valid) {
    
			console.log('校验成功');
			return true
		} else {
    
			console.log('校验失败');
			return false;
		}
	});
  }
},

另一种 每个form-item都当成一个form 然后循环每个form去校验,这种方式比较繁琐 不是很推荐,还是以td中包含 form 简单介绍一下吧

模版部分

  <el-table-column
      prop="name"
      label="名称"
      width="280"
      class-name="td-name--first"
    >
      <template slot-scope="scope">
        <el-form
          :model="scope.row"
          :rules="tableSpaceRules"
          :ref="'name-' + scope.$index"
          onkeydown="if(event.keyCode==13){return false;}"
        >
          <el-form-item prop="name">
            <el-input
              placeholder="请输入名称"
              v-model="scope.row.name"
            />
          </el-form-item>
        </el-form>
    </el-table-column>

规则直接写到data中

      tableSpaceRules: {
    
        name: [{
    
          required: true,
          trigger: "blur",
          message: "请输入名称"
        },
        {
    
          min: 1,
          max: 30,
          message: "最多 30 个字符",
          trigger: "blur"
        },
        {
    
          pattern: /^[A-Z]/,
          message: "需以大写字母开头",
          trigger: "blur"
        },
        {
    
          pattern: /^[A-Z][A-Z0-9_]*$/,
          message: "只能包含大写字母、数字和下划线",
          trigger: "blur"
        }
        ],
        size: [
          {
     required: true, trigger: "blur", message: "请输入大小" },
          {
    
            pattern: /(^\d+$)/,
            message: '只能包含数字',
            trigger: "blur"
          }
        ]
      }

校验方法

     
    submitTableForm(tableData, formName) {
    
      let str = "";
      let arr = [];
      tableData.forEach((item, index) => {
    
        str = formName + "-" + index;
        this.$refs[str].validate(valid => {
    
          if (valid) {
    
            arr.push("1");
          } else {
    
            arr.push("0");
            return false;
          }
        });
      });

      if (arr.includes("0")) {
    
        return false;
      } else {
    
        return true;
      }
    },
    verifyTableSpace() {
    
      let nameFlag = this.submitTableForm(this.tableSpaceNameData, "name");
      
      if (this.nameFlag) {
    
      	console.log("校验通过")
      } else {
    
      	console.log("校验失败")
      }
    },


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_37644989/article/details/100063640

智能推荐

最新电信,网通路由表(200701日更新)-程序员宅基地

文章浏览阅读4.1k次。说明:ROS2.9.27用的网通,电信路由脚本操作方式: 添加脚本方式请,将你的正确的电信或网通的网关,使用用编辑-替换掉脚本里的“网关”,然后打开winbox,点击Terminal(控制终端)然后复制脚本,并在Terminal(控制终端)中点右键选择“paste”粘贴脚本,粘贴完后敲回车,即可完成!电信的路由表如下:/ip routeadd dst-address=

Navicat Premium 12.0.23安装与激活-程序员宅基地

文章浏览阅读517次。本文介绍Navicat Premium 12.0.24的安装、激活与基本使用。说明:博主所提供的激活文件理论支持Navicat Premium 12.0.16 - 12.0.24简体中文64位,但已测试的版本为Navicat Premium 12.0.22、12.0.23和12.0.24简体中文64位。 说明:博主所提供的压缩包格式均为RAR5,即WinRAR 5.0以上的版本才能正常解压,...

STM32标准库移植RT-Thread Nano添加FinSH与控制台_标准库实现rt_hw_console_getchar-程序员宅基地

文章浏览阅读1.6k次,点赞6次,收藏15次。添加过shell后首先要在 rtconfig.h中定义#define RT_USING_FINSH为了方便,串口相关函数添加在board.c中使用串口中断实现命令的接收/* * Copyright (c) 2006-2019, RT-Thread Development Team * * SPDX-License-Identifier: Apache-2.0 * * Change Logs: * Date Author Notes * 2017-0_标准库实现rt_hw_console_getchar

chapter 4.3 cache -- 主存的地址映射和替换算法_映射替换,地址流格式-程序员宅基地

文章浏览阅读1.6k次,点赞3次,收藏4次。cache – 主存的地址映射和替换算法映射(3)1.直接映射原理主存块以cache长度分区,映射时cache缓存块仅接受各区中相对应的块号,tag仅需保存t位区号eg: cache[0] 中仅可以存放 主存[0,2c,2c+1,3*2c…]每个缓存块i(cache) 可以和 若干个主存块对应每个主存块j只能和 一个 缓存块(cache)对应地址块号直接与cache对应块标记..._映射替换,地址流格式

最长上升子序列&&最长不下降子序列-程序员宅基地

文章浏览阅读99次。百练2757: 题目描述: 对于给定的序列,求出最长上升子序列的长度。题目链接:http://bailian.openjudge.cn/practice/2757解题思路一、动态规划 1. 找子问题错误找法: “求序列的前n个元素的最长上升子序列的长度”是个子问题,但这样分解子问题,不具有“无后效性” 假设F(n) = x,但可能有多个序列满足F(n)..._. s,c; xm,xadnn/ or 0

NetWork——描述一次完整的网络请求过程_浏览器network发起请求历程-程序员宅基地

文章浏览阅读4.9k次。想拥有自己的服务器?价钱太贵,便宜的配置太低。。。总是处于各种原因,现在特大好消息,阿里云服务器活动,价钱低到爆,快来了解下,2核4G,3年低至699,时间有限,还剩10天,快来选购吧,地址:https://promotion.aliyun.com/ntms/act/vm/aliyun-group/buy.html?group=IAq264WFLl当我们在浏览器的地址栏输入 www.lin..._浏览器network发起请求历程

随便推点

对前端页面的边框设置_前端斜的边框-程序员宅基地

文章浏览阅读6.5k次。二·如何对边框设置:1.&lt;div style="text-align:center; vertical-align:middel;"&gt;&lt;input type="text"&gt;&lt;/div&gt;这样你试试,应该就是左右 上下都居中了2.如果是让内容显示的居中:&lt;html&gt;&lt;head&gt;&lt;style&gt;_前端斜的边框

Springboot2中修改tomcat参数支持请求特殊符号 解决:java.lang.IllegalArgumentException: Invalid character found in ..._springboot内置tomcat放宽http请求头特殊字符-程序员宅基地

文章浏览阅读929次。使用Springboot2中内置的tomcat启动项目时候,前端发来的请求报错:java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986 at org.ap..._springboot内置tomcat放宽http请求头特殊字符

SHOW STATUS语句查看MySQL数据库的性能参数_show status like threads-程序员宅基地

文章浏览阅读1k次。SHOW STATUS语句查看MySQL数据库的性能参数1.SHOW STATUS like 'Slow_queries' //慢查询的次数 查看日志 1.配置 centos下 my.cnf log-slow-queries = /tmp/mysql-slow.log long_query_..._show status like threads

matlab如何解不等式,如何用MATLAB求解不等式组的所有可能解-程序员宅基地

文章浏览阅读2k次。太多了吧:No. a b c d1 4 86 17 652 13 96 20 873 5 97 56 544 4 32 14 ..._matlab 不等式组求解

2022年09月 Scratch图形化(三级)真题解析#中国电子学会#全国青少年软件编程等级考试_2022年9月scratch三级真题-程序员宅基地

文章浏览阅读273次,点赞4次,收藏4次。所以,答案D是错误的。两个角色小猫和小狗,给小猫创建一个仅适用于当前角色的变量“奔跑速度”,给小狗也创建一个仅适用于当前角色的变量“奔跑速度”,小猫和小狗程序如下图所示,点击绿旗,按下两次空格键,小猫和小狗的奔跑速度都变为7。运行程序后角色将从(0,0)点开始移动,x和y坐标的增加值均在1至10之间,因此,移动后的位置为点(1,1),(1,10),(10,1)和(10,10)所围成的四边形中。D:“我的变量”和计时器一起增加,当“我的变量”大于15时,计时器会归零,“我的变量”会随着计时器重新开始增加。_2022年9月scratch三级真题

Spring Security 如何实现身份认证和授权?_spring security认证和授权流程-程序员宅基地

文章浏览阅读2.7k次,点赞5次,收藏6次。Spring Security 是一个非常强大的安全框架,可以为 Spring Boot 应用提供完整的身份认证和授权功能。本文介绍了 Spring Security 如何实现身份认证和授权,并提供了示例代码。使用 Spring Security 可以非常方便地保护应用程序,防止恶意攻击和数据泄露。_spring security认证和授权流程

推荐文章

热门文章

相关标签