给需要验证的表单项 el-form-item 绑定 prop 属性 注意:prop 属性需要指定表单对象中的数据名称 代码如下(示例): <el-form label-width="80px" :model="form" :rules="rules"> <el-form-item label="手机号" prop="mobile"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-...
Form: { username: "", password: "" } }; } }; </script>3.数据校验1. 增加校验规则 rules, prop:作用与el-form-item,表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <template> <div class="form_container"> <...
<el-form-item label="材料名称" prop="name"> <el-input v-model="form.name" placeholder="请输入"></el-input> </el-form-item> // ... 其它数据 </el-form> <template #footer> <span class="dialog-footer"><el-button size="mini" type="primary" @click="show = false">确定</el-bu...
:key="item.prop" :label="item.label" :prop="item.prop" > {{ item.prop }}--->{{ formData[item.prop] }} <!--根据type来显示是什么标签--> <el-input v-model="formData[item.prop]" :placeholder="'请输入' + item.label" v-if="item.etype == 'input'" ></el-input> </el-fo...
<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...
optionkey="2"label="全部":value="2"></el-option> <el-optionkey="1"label="是":value="1"></el-option> <el-optionkey="0"label="否":value="0"></el-option> </el-select> </el-form-item> <el-form-itemlabel="是否过期"prop="payTime"> <el-selectv-model="queryParms.payTime"...
二次封装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...
<el-form-itemprop="password"><el-inputv-model.trim="ruleForm.password"placeholder="密码":type="showPass ? '' : 'password'"type="password"><template#suffix><imgv-if="showPass"alt=""class="pass-icon"src="@/assets/login/open_eye.png"@click="showPass = !showPass"/><imgv-elsealt=...
二、把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...
<el-form-item prop="max"> <el-input v-model="form.max" clearable=""/> </el-form-item> <el-form-item> <el-button type="primary" @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script> ...