elementUI 动态校验表单数据的方法

elementUI 动态校验表单数据的方法

直接设置如下

list 为动态获取的数据值列表数据

这里主要设置两块内容 prop为动态数据 rules设置需要校验的值

:prop="list.${index}.title" :rules="rules.title" //title 名称可自己定义

javascript 复制代码
//这里主要设置两块内容 prop为动态数据  rules设置需要校验的值
//:prop="`list.${index}.title`" :rules="rules.title"
<div v-for="(val,index) in list" :key="val">
	<el-form-item label="标题" :prop="`list.${index}.title`" :rules="rules.title">
			<el-select v-model="val.name">
				 <el-option label="名称" value="1"/>
			</el-select>
	</el-form-item>
</div>
//必填校验设置
const rules = reactive({
	title: [{ required: true, message: '请填写', trigger: 'change' },],
})
相关推荐
阿奇__42 分钟前
element 跨页选中,回显el-table选中数据
前端·vue.js·elementui
努力往上爬de蜗牛43 分钟前
vue3 daterange正则踩坑
javascript·vue.js·elementui
谢尔登43 分钟前
【React】SWR 和 React Query(TanStack Query)
前端·react.js·前端框架
断竿散人44 分钟前
专题一、HTML5基础教程-Viewport属性深入理解:移动端网页的魔法钥匙
前端
3Katrina1 小时前
理解Promise:让异步编程更优雅
前端·javascript
星之金币1 小时前
关于我用Cursor优化了一篇文章:30 分钟学会定制属于你的编程语言
前端·javascript
天外来物1 小时前
实战分享:用CI/CD实现持续部署
前端·nginx·docker
每天都想着怎么摸鱼的前端菜鸟1 小时前
【uniapp】uni.chooseImage在Android 13以下机型第一次调用授权后无权限问题
javascript·uni-app
moxiaoran57531 小时前
Spring Cloud Gateway 动态路由实现方案
运维·服务器·前端
市民中心的蟋蟀1 小时前
第十一章 这三个全局状态管理库之间的共性与差异 【上】
前端·javascript·react.js