1.功能需求:使用element的表单验证方式,动态for循环的场景如何使用?如下图所示:

2.dom结构如下(重点)

注意:

1. userList和其他表单项在同一个form表单中

2.prop改为:prop,形式为'userList.'+index+'.name'

3.每一个循环中的<el-form-item>都需要加:rules

 <el-form :model="addInfo"
                 size="mini"
                 :rules="rules"
                 ref="addInfo">
            <el-form-item label="名称"
                          prop="title">
                <el-input v-model="addInfo.title" size="mini"/>
            </el-form-item>
            <div v-for="(item, index) in addInfo.userList" :key="index">
                <el-form-item label="账号:"
                              :prop="'userList.'+ index +'.name'"
                              :rules="rules.username">
                    <el-input v-model="item.username"
                              size="mini"/>
                </el-form-item>
                <el-form-item label="密码:"
                              :prop="'userList.'+ index +'.password'"
                              :rules="rules.password">
                    <el-input v-model="item.password"
                              type="password"/>
                </el-form-item>
                <el-form-item label="手机号:"
                              :prop="'userList.'+ index +'.phone'"
                              :rules="rules.phone">
                    <el-input v-model="item.phone"
                              size="mini"/>
                </el-form-item>
            </div>
        </el-form>

3.data结构如下:rules为个表单项的验证规则,addInfo是表单绑定的数据结构

        data(){
                return {
                    rules: {
                        name: [{
                                required: true,
                                message: '请输入名称',
                                trigger: 'blur'}],
                        phone: [{
                                required: true,
                                message: '请输入账号手机号',
                                trigger: 'blur'}],
                        username: [{
                                required: true,
                                message: '请输入账号名称',
                                trigger: 'blur'}],
                        password: [{
                                required: true,
                                message: '请输入密码',
                                trigger: 'blur'}
                        ]
                    }, // 添加校验
                    addInfo: {
                        name: '',
                        userList: [{
                            phone: '',
                            username: '',
                            password: ''
                        }]
                    }
                };

 

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐