<el-form ref="ruleFormRef":hide-required-asterisk="true":model="broker":rules="rules"><div v-for="(item, index) in broker.education":key="index"><el-form-item:prop="`education.${index}.name`":rules="{ required: true, message: '请填写名称', trigger: ['blur', 'change'] }">...
el-form-item 属性 :prop = "contactList.${i}.contact_name" :rules="[{{required: true, message: '不能为空', trigger: ['blur', 'change']}]" 写相应的校验规则 删除已添加的表单 v-for 绑定时,:key="item.id" 使用对应值的id,而不是对应的索引i addConcats () { this.ruleForm.contactL...
<el-form ref="form" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" > <el-form-item label="用户名" prop="username"><el-input v-model="ruleFormRef.username.value" placeholder="用户名/手机号/邮箱" clearable></el-input> </el-form-item> ...
code(https://codesandbox.io/s/validate-formitem-wn221w?file=/src/components/HelloWorld.vue:1157-1176) 注意点: image.png 1、v-for的数组字段需要和prop中的字段相同。 2、每一个item中的rules对应字段需要和数组字段的每一个key相同
<formref="myForm":model="formData":rules="formRules"class="demo-form"> <el-form-itemlabel="用户名"prop="username"> <el-inputv-model="formData.username"></el-input> </el-form-item> <el-form-itemlabel="密码"prop="password"> <el-inputtype="password"v-model="formData.password"></...
</el-form-item> </el-form> 1. 2. 3. 4. 5. 6. 代表这是一个表单 ref:表单被引用时的名称,标识 rules:表单验证规则 model:表单数据对象 abel-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值 :表单中的每一项子元素 ...
<template> <div class="login-container"> <el-form ref="formRef" :model="formData" :rules="formRules" class="login-form"> <h2 class="login-title">登录</h2> <el-form-item prop="username"> <el-input v-model="formData.username" placeholder="请输入用户名"></el-input...
二、把form的ref名称换掉,不要与form重复 如: <el-form ref="editForm" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入"/></el-form...
javascript //在你的组件中 import{ElForm,ElFormItem,ElInput,ElButton}from'element-plus';import'element-plus/lib/theme-chalk/index.css';export default{ components:{ ElForm,ElFormItem,ElInput,ElButton,},//其他组件选项...};```3.在表单项中使用`rules`属性定义验证规则：```html <template> ...
二次封装el-form,理由无非就是多个地方用同一个表单,懒得重复写校验。 表单组件 <template><el-formref="FormRef":model="formData":rules="rules"><el-form-itemlabel="名称"prop="name"><el-inputv-model.trim="formData.name"/></el-form-item><el-form-itemlabel="地址"prop="address"><el-input...