form表单 某一个项是数组,循环校验

核心点

在元素上
:prop="'list.' + index + '.count'"  :rules="rules.count"

完整代码

<a-form-model
     ref="ruleForm"
     layout="horizontal"
     :model="form"
     :rules="rules"
     :label-col="{ span: 4 }" 
     :wrapper-col="{ span: 20 }"
 >
     <a-form-model-item label="选项类型:" prop="type">
         <a-radio-group v-model="form.type">
             <a-radio value="1">
             单选
             </a-radio>
             <a-radio value="2">
             多选
             </a-radio>
             <a-radio value="3">
             文本
             </a-radio>
         </a-radio-group>
     </a-form-model-item>
     <a-form-model-item label="选项题目:" prop="name">
         <a-input v-model="form.name"/>
     </a-form-model-item>
     <a-form-model-item label="选项内容:(最多添加5组)" :colon="false" :labelCol="{ span: 24 }" :wrapperCol="{ span: 24 }" prop="list">
         <div v-for="(item,index) in form.list" :key="index" class="row-box">
             <a-form-model-item style="width:325px" :label="'选项'+opt[index]" :prop="'list.' + index + '.value'" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" :rules="rules.value">
                 <a-input v-model="item.value"></a-input>
             </a-form-model-item>
             <a-form-model-item label="" :prop="'list.' + index + '.count'" :rules="rules.count">
                 <a-input style="width:80px;margin-left:8px" v-model="item.count"></a-input>
             </a-form-model-item>
         </div>
     </a-form-model-item>
     <a-form-model-item label="是否必填" prop="type">
         <a-radio-group v-model="form.type">
             <a-radio value="1"></a-radio>
             <a-radio value="2"></a-radio>
         </a-radio-group>
     </a-form-model-item>
     
 </a-form-model>


<script>
export default({
    data(){
        return{
            form:{
                type:'1',
                name:'',
                list:[
                    {
                        value:'',
                        count:''
                    },
                ]
            },
            rules:{
                name:[{ required: true, message: '请输入选项题目', trigger: 'blur' }],
                type:[{ required: true, message: '请选择选项类型', trigger: ['blur','change'] }],
                list:[{ required: true, message: '请输入内容', trigger: ['change'] }],
                value:[{ required: true, message: '请输入内容', trigger: ['blur'] }],
                count:[{ required: true, message: '请输入分数', trigger: ['blur'] }],
            },
            
        }
    },
   })
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值