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' },],
})
相关推荐
plmm烟酒僧2 分钟前
使用 OpenVINO 本地部署 DeepSeek-R1 量化大模型(第二章:前端交互与后端服务)
前端·人工智能·大模型·intel·openvino·端侧部署·deepseek
Rhys..3 分钟前
js-三元运算符
前端·javascript·数据库
不是,你来真的啊?4 分钟前
Vue3响应式原理(源码)【reactive,ref,computed】
前端·vue·源码
snow@li7 分钟前
前端:拖动悬浮小窗
开发语言·前端·javascript
2301_796512527 分钟前
ModelEngine平台创建知识库体系 ,帮助“前端职业导航师”定制化私域知识累积
前端·modelengine
鹏程十八少8 分钟前
Android ANR项目实战:Reason: Broadcast { act=android.intent.action.TIME_TICK}
android·前端·人工智能
温轻舟9 分钟前
圣诞节雪人动态效果 | HTML页面
开发语言·前端·javascript·html·css3·温轻舟·圣诞
云技纵横9 分钟前
Vue 2 生产构建 CSS 压缩报错修复与深度选择器规范
前端·css·vue.js
Codebee10 分钟前
打破偏见!企业级AI不是玩具!Ooder全栈框架+程序员=专业业务系统神器
前端·全栈
翻斗花园岭第一爆破手14 分钟前
flutter3.Container中的decoration
开发语言·前端·javascript