element动态表单验证prop用法

2024年4月26日 420次阅读 来源: chenjunbiao

基于Vue的Element.js的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'"是会报错的。没有看源码所以不知道element底层的逻辑是怎么写。囧~~

    原文作者：chenjunbiao
    原文地址: https://segmentfault.com/a/1190000015402234
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞