vue-element-from

一，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>