vue elementUI 表单校验（多层嵌套）

最新推荐文章于 2024-09-12 11:06:36 发布

qq_40291247

最新推荐文章于 2024-09-12 11:06:36 发布

阅读量1.1k

点赞数 1

分类专栏：前端 VUE 文章标签： elementUI 多层嵌套表单纠验

本文链接：https://blog.csdn.net/qq_40291247/article/details/102758241

版权

VUE 同时被 2 个专栏收录

37 篇文章 2 订阅

订阅专栏

前端

18 篇文章 0 订阅

订阅专栏

多说无益，直接上代码↓↓↓

<template>
	<el-form ref="ruleForm" :rules="ruleForm" :model="form"  label-width="100px" :inline="true">
 		<el-form-item label="自编码" prop="goodsCode">
			<el-input v-model="form.goodsCode"  placeholder="请输入自编码"></el-input>
		</el-form-item>
		<el-form-item label="作者" prop="goodsAuthor">
			<el-input v-model="form.goodsAuthor"  placeholder="请输入作者"></el-input>
 		</el-form-item>
 		<div v-for="(item,index) in form.goodsStandardList" :key="index">
         	<el-form-item label="估定价" :prop="`goodsStandardList.${index}.goodsPrice`"   :rules="ruleForm.goodsStandardList.goodsPrice">
            	<el-input v-model="item.goodsPrice"  placeholder="书名、书号/ISB"></el-input>
         	</el-form-item>
        </div>
 	</el-form>
</template>

form: {
        goodsCode: '', // 自编码
        goodsAuthor: '', // 作者
        goodsStandardList: [
          { goodsPrice: '', // 估定价}
        ],
      },
ruleForm: {
        goodsCode: [
          { required: true, message: '请输入自编码', trigger: 'blur' }
        ],
        goodsAuthor: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        goodsStandardList: {
          goodsPrice: [
            { required: true, message: '请输入估定价', trigger: 'blur' }
          ], 
        }
      },