Bootstrap

Vue+Element 循环输入框的校验

1. 版本

"element-ui": "^2.13.1",
"vue": "^2.6.11",

2. el-form 实现对循环输入框的校验

2.1 需求说明

因为需要循环生成输入框,并且在特定情况下对输入框绑定的数据校验

2.2 实现方式

刚开始想到的方法是循环生成 form表单,给循环项设置 ref ,  然后在校验的时候也是循环校验(校验起来十分繁琐,需要记录校验成功的个数,记录列表项是否全部校验成功等)

<template 
    v-for="(item, index) in form.optionList" 
    :key="index">
    <el-form 
        :ref="`formRef${index}`"
        :model="item"
        :rules="formRules">
        <el-form-item label="分值" prop="score">
            <el-input v-model="item.score" />
        </el-form-item>
    </el-form>
</template>

2.3 改进方式

后面在优化代码时,看了下

;