(element-ui)v-for动态数据循环表单验证的处理方式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)