一,form 属性 方法 事件
1,:model="dialogFormData" 必须参数
2,status-icon
3,:rules="rules"
4,ref="ruleForm"
5,label-width="100px",
6,class="demo-ruleForm"
二,form-item
1, label="密码"
2, prop="pass" 验证必须
三,输入组件
1,el-input
密码 type="password"
v-model="dialogFormData.pass"
autocomplete="off"
placeholder="请输入内容"
四,验证
1,自定义验证
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm2.checkPass !== '') {
this.$refs.ruleForm2.validateField('checkPass');
}
callback();
}
};
2, 常规验证
rules:{
pass: [
{ validator: validatePass, trigger: 'blur' }
],
region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], },
date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ],
name: [ { required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ],
输入框系列
1,select 远程
<el-form-item label="客源" prop="CustomerId">
<el-select
v-model="localData.CustomerId"
clearable
filterable
remote
default-first-option
placeholder="请输入客源编号"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in remoteSelectOptions"
:key="item.Id"
:label="item.Name"
:value="item.Id">
<span style="float: left">{{ item.Name }}</span>
<span style="float: left; margin-left: 3px; color: #8492a6; font-size: 13px">{{ item.Code }}</span>
<!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.DictionaryId.Area.Name }}</span>-->
<!--<span style="float: right; color: #8492a6; font-size: 13px">【{{ item.Code }}】</span>-->
<!--<span style="float: right; color: #8492a6; font-size: 13px">【{{ item.Size }}】</span>-->
<!--<span style="float: right; color: #8492a6; font-size: 13px">【{{ item.Trade }}】</span>-->
<!--<span style="float: right; color: #8492a6; font-size: 13px">【{{ item.State }}】</span>-->
<!--<span style="float: right; color: #8492a6; font-size: 13px">【{{ item.Floor }}/{{item.TotalFloor}}】</span>-->
</el-option>
</el-select>
<span>{{showCode}}</span>
</el-form-item>
vue-element-from
猜你喜欢
转载自blog.csdn.net/sinat_33384251/article/details/88427912
今日推荐
周排行