element 动态校验的3中方式[{}] ,‘ ‘, [ ]
程序员文章站
2022-05-03 18:04:12
...
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
// 1
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
// 2
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item style="margin-left:0px"
// 3
:prop="'otherUsers[' + index +']'"
:rules="[{ required: true, message: '此项不能为空', trigger: 'change' }]">
<el-select v-model="from.otherUsers[index]" filterable clearable>
<el-option v-for="item in allOnJob" :key="item.employeeId+'q'" :label="item.nameAndDepartment" :value="item.employeeId" />
</el-select>
</el-form-item>
data() {
return {
dynamicValidateForm: {
email: '', // 1
domains: [{ value: '' }], // 2
data:[ ] // 3
}
};
},
推荐阅读
-
vue动态绑定class的几种常用方式小结
-
vue+element创建动态的form表单及动态生成表格的行和列
-
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
-
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
-
详解VUE Element-UI多级菜单动态渲染的组件
-
详解Spring的两种代理方式:JDK动态代理和CGLIB动态代理
-
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
-
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
-
Vue加载组件、动态加载组件的几种方式
-
jquery 动态创建元素的方式介绍及应用