el-form 中的数组表单验证(数组可动态添加删除)

小金的口袋

已于 2022-05-25 09:37:25 修改

阅读量3.8k

点赞数 1

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

于 2022-05-25 09:34:36 首次发布

本文链接：https://blog.csdn.net/Jimmmyking/article/details/124959243

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

除了一些简单的表单验证之外，我们还会有一些稍微复杂点的多层级表单的验证，如下图所示可点击添加，删除对数组进行操作，当点击确定时需要验证每一条form-item不能为空
在这里插入图片描述
其tempalte部分主要代码如下所示：

<el-form :model="form" ref="cardForm" :rules="rules" label-position="top" >
		<el-form-item v-for="(item, index) in form.CARD_RIGHTS_LIST" :label="'卡权益' + (index+1)" :key="index" :prop="`CARD_RIGHTS_LIST.${index}.RIGHT_NAME`" :rules="{required: true, message: `请输入信用卡权益${index+1}`, trigger: ['change']}">
		   <el-col :span="20">
		   		<el-input v-model=" item.RIGHT_NAME" :maxlength="20" placeholder="请输入信用卡权益" clearable show-word-limit></el-input>
		   </el-col>
		   <el-col :span="4" style="text-align: right;">
		  		<el-button v-if="form.CARD_RIGHTS_LIST.length > 1" icon="el-icon-delete" type="danger" plain @click.prevent="handleRemoveValue(index)">删除</el-button>
		  	</el-col>
		</el-form-item>
		<el-form-item v-if="form.CARD_RIGHTS_LIST.length < max" class="last">
		   <div class="et-tag__button--add" @click="handleAddValue"><img :src="tagAddIcon" width="16px" height="16px" alt="">添加（最多{{max}}条）</div>
		</el-form-item>
</el-form>
<el-form-item class="product-form__footer last" label="">
    <el-button class="et-button" type="primary" @click="submitForm(form)">确认</el-button>
</el-form-item>

data部分代码如下：

form:{
          CARD_RIGHTS_LIST:[{ID:'',RIGHT_NAME:''}],
        },

methods部分如下：

//添加form-item
handleAddValue() {
        this.form.CARD_RIGHTS_LIST.push({ID:'',RIGHT_NAME:""})
      },
//删除form-item
handleRemoveValue(index) {
        this.form.CARD_RIGHTS_LIST.splice(index, 1)
      },
//提交form并且验证
submitForm() {
        this.$refs.cardForm.validate((valid) => {
          if (valid) {
            this.$message.info("操作成功");
           //此处加入自己需求
        } else {
          //此处加入自己需求
        }
          } else {
            this.$message.info("请完善信息");
            return ;
          }
        });
      },

以上仅展示此处对应的需求代码，可直接根据自己的需求进行修改即可实现此功能