elementUI动态添加校验规则

最新推荐文章于 2025-03-22 18:05:31 发布

KeroroLX

最新推荐文章于 2025-03-22 18:05:31 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/github_38928905/article/details/118568335

elementUI 专栏收录该内容

4 篇文章

订阅专栏

本文讲解如何在 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>