Element-ui 之 form表单套数组、表单数组套数组的校验rules

最新推荐文章于 2024-06-21 17:20:59 发布

梓涵999

最新推荐文章于 2024-06-21 17:20:59 发布

阅读量1.3k

点赞数 8

分类专栏： ElementUi 文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/qq_61553794/article/details/135451461

版权

ElementUi 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<el-form ref="form" :model="form" :rules="rules1" label-width="90px">
	<template v-if="form.arr1 && form.arr1.length">
		<div v-for="(item1, index1) in form.arr1" :key="index1">
			<!-- 数组嵌套数组 -->
			<el-row :gutter="32" v-for="(item2, index2) in item1.arr2" :key="index2">
				<el-col :span="10">
					<el-form-item label="嵌套数组" :rules="rules2.content1" :prop="`arr1[${index}1].arr2[${index2}].content1`">
						<el-input v-model="item2.content1" placeholder="请输入" />
					</el-form-item>
				</el-col>
			</el-row>
			<!-- 单个 -->
			<el-form-item label="单个1" :prop="`arr1[${index1}].content1`" :rules="rules1.content1">
				<el-input v-model="item1.content1" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="单个2" :prop="`arr1[${index1}].content2`" :rules="rules1.content2">
				<el-input v-model="item1.content2" placeholder="请输入" />
			</el-form-item>
		</div>
	</template>
</el-form>

rules1: {
	conten1: [{
		required: true,
		message: 'XXX不能为空',
		trigger: 'blur'
	}],
},
rules2 {
	conten1: [{
		required: true,
		message: 'XXX不能为空',
		trigger: 'blur'
	}],
},