Element动态表单验证prop用法

  1. 一、介绍
  2. 二、使用

一、介绍

基于 Vue的 Element 的 Form 组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。

二、使用

1、el-form标签的model属性必须是对象,而el-form-item里的v-model为非对象。
2、el-form-item的prop的值必须与rules字段名称保持一致,如果el-form-item是动态添加的,prop则是一个数组或数组对象,具体写法如下:

<div v-for="(item, index) in courseDetail.chapters" :key="index" class="dialog_section" v-if="item.status">
    <h3>课程详情:第{{index+1}}节</h3>
    <el-form-item label="课节标题" :prop="'chapters.' + index + '.title'"
        :rules="[{ required: true, message: '请输入课节标题', trigger: 'blur' },{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }]">
        <el-input v-model="item.title"></el-input>
    </el-form-item>
</div>

比如上面的代码为动态添加的表单验证,注意到prop的写法::prop=”‘chapters.’ + index + ‘.title’”

courseDetail.chapters是个数组,如果:prop写成:prop=”‘item[‘ + index + ‘].title’”是会报错的。


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Element动态表单验证prop用法

文章字数:333

本文作者:Spicy boy

发布时间:2020-11-17, 10:10:10

最后更新:2021-03-30, 17:08:34

原始链接:http://www.spicyboy.cn/2020/11/17/Element%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81prop%E7%94%A8%E6%B3%95/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏