elementUI动态添加校验规则

本文讲解如何在 Vue 表单中动态管理 groupIdList,无论是基本的整数数组还是复杂的对象数组,以及对应的 prop 格式调整。着重于el-form的 :prop 属性设置技巧,以适应不同数据结构的验证需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景:点击【添加】或删除的时候改变数组,数组格式

data(){
  return {
		formData:{
			groupIdList:[]//[12,23,34]
		},
		rules:{
		  'groupId': [
            { required: true, message: '请选择客群', trigger: 'change' },
            { required: true, message: '请选择客群', trigger: 'blur' },
          ],
		}
	}
}
 <el-form ref="envelopeForm"  :rules="rules" :model="formData">
 			<div class="clearfix" v-for="(item, index) in formData.groupIdList" :key="index">
                    <el-form-item class="fl"
                                  :label="'客群' + (index + 1)+ ':'"
                                  :prop="'awardRule.groupIdList.'+index"
                                  :rules="rules.groupId">
                      <el-select placeholder="请输入关键词" v-model="formData.groupIdList[index]" clearable>
                        <el-option v-for="(op, k) in groupOptions" :key="k" :label="op.name" :value="op.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-button>删除</el-button>
              </div>
              <el-form-item>
                <el-button>添加</el-button>
              </el-form-item>
</el-form>
 :prop="'awardRule.groupIdList.'+index"

这里的格式为 : 【awardRule.groupIdList】为el-form绑定的数据下的参数,不能写为【formData.awardRule.groupIdList】

以上是校验的是数组,且格式为groupIdList:[1,23,3];

如果校验的是
groupIdList:{key1:{id:'1'},key1:{id:'2'}}groupIdList:[{id:'1'},{id:'2'}],


:prop="'awardRule.groupIdList.'+index"
修改为
:prop="'awardRule.groupIdList.'+index+'.id'"

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值