美文网首页
(element-ui)v-for动态数据循环表单验证的处理

(element-ui)v-for动态数据循环表单验证的处理

作者: 梦想_Dream | 来源:发表于2021-12-04 17:09 被阅读0次

表单验证的时候:
1:prop改为 :prop,形式为’List.’+index+’.startDate’
2:List.’+index+’.startDate就是数据结构与数据
3:每一个循环中的都需要加:rules

Dom结构如下:

<el-form
  ref="form"
  :model="form"
  :rules="ruleForm"
>
    <div v-for="(item, i) in form.list" :key="i">
        <el-form-item :prop="`list.${i}.level`" :rules="ruleForm.level" label="埋点层级:">
            <el-input v-model="item.level"></el-input>
        </el-form-item>
    </div>
</el-form>

data结构如下:rules为个表单项的验证规则

export default {
    data() {
        return {
            form: {
                list: [
                    {level: ''}
                ]
            },
            ruleForm: {
                level: [
                    { required: true, message: '请选择埋点层级', trigger: 'change' },
                ],
            }
        }
    }
}

相关文章

网友评论

      本文标题:(element-ui)v-for动态数据循环表单验证的处理

      本文链接:https://www.haomeiwen.com/subject/kqxbxrtx.html