vue-element-from

最新推荐文章于 2024-03-31 17:05:52 发布

xiami133

最新推荐文章于 2024-03-31 17:05:52 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/sinat_33384251/article/details/88427912

版权

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

验证命令：
this. $r e f s [^{'} r e s F o r m^{'}] . v a l i d a t e ((v a l i e d) = >) 等同于 t h i s .$ refs.resForm.validate()

动态添加form表单


                    <el-row>
                        <el-col :span="22">
                            <el-form-item
                                    v-if="display==='add'"
                                    v-for="(contact, index) in localData.ContactsId"
                                    :label="'联系人' + index"
                                    :prop="'ContactsId.' + index + '.Mobile'"
                                    :rules="rules.Contacts"
                                    label-width="88px"
                            >
                                <el-col :span="4">
                                    <el-input v-model="contact.Name" placeholder="业主"></el-input>
                                </el-col>
                                <el-col :span="10">
                                    <el-input v-model="contact.Mobile"></el-input>
                                </el-col>
                                <el-col :span="6"></el-col>
                                <el-col :span="4">
                                    <el-button @click.prevent="removeContact(contact)">删除</el-button>
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" v-if="display==='add'">
                            <el-button type="primary" round size="small" @click="addContact">添加</el-button>
                        </el-col>

                    </el-row>