el-form 表单

<el-form>

** 必须设置：

:model="Form"

ref="Form"

** 可以设置：

:rules="rules"       　　 // 创建验证表单

:inline=true        　   　// 创建行内表单

inline-message　　　// 以行内形式展示校验信息 默认为false

size=" "       　　　　  // 整体表单大小medium / small / mini 

status-icon       　　　// 显示验证每行表单末尾的正确或错误图标 默认为false

hide-required-asterisk=true       　　 //必填字段前是否显示*，默认为false

 

<el-form-item>

label="名字"      　　　　　　　　　 //每行表单前面的字

验证表单时设置：prop="name"        //唯一的验证的键值
<el-input v-model="">

登录按钮：

<el-button @click="submitForm('form')">登录</el-button>       　　 //传入的表单需要用单引号扩起 ' '

*** 必须在el-form中设置 ref 

submitForm(form){
        this.$refs[form].validate((valid) => {        　//所以表头必须有refs
            if (valid) {
            alert('输入成功');        　　　　　　　　　　　//成功返回事件
            } else {
            console.log('error submit!!');
            return false;
            }
        })
}

 

重置按钮：

<el-button @click="resetForm('form')">重置</el-button>        　　　　//传入的表单需要用单引号扩起 ' '

*** 必须在el-form中设置 ref  　　每一个需要重置的el-form-item都必须设置唯一的 prop值

resetForm(form){
        this.$refs[form].resetFields();
}

 

 

---

 

验证规则：　　　　rules 和 form 同级写规则

 

el-date-picker　　日期选择器，选择xx至xx

rules:{ date:[{ required: true, message: '请选择统计时间', trigger: 'change' }] }　　　　　　// 不加 type: 'date'

获取时间：

//转换为格式：2021-03-25
console.log(dayjs(this.ruleForm.date[0]).format('YYYY-MM-DD'))        //开始时间
console.log(dayjs(this.ruleForm.date[1]).format('YYYY-MM-DD'))        //结束时间