element 的时间控件，有关v-model，:picker-options，@change

最新推荐文章于 2025-05-26 10:25:27 发布

helal

最新推荐文章于 2025-05-26 10:25:27 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

文章标签： element html js vue 时间插件

本文链接：https://blog.csdn.net/helal/article/details/78143578

在使用Element的时间控件时遇到问题，通过v-model直接绑定值在选择时间后未出现在formData中，解决方法是在组件上添加@change事件。此外，为实现开始时间必须小于结束时间的需求，利用:picker-options属性进行配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、我直接用v-model="seachObj.beginTime"，选择时间后选上了，但是传给接口看控制台headers里的form data的时候竟然没有beginTime

解决方法是：@change="dateChangeBeginTime"

dateChangeBeginTime(val) {
    console.log(val);
    let self = this;
    self.seachObj.beginTime=val;

},

这样就可以了解决form data的竟然没有beginTime了

2、需求是

选开始时间后，结束时间必须必开始时间大；

这就用到:picker-options了

htlm

提出日期：<el-date-picker type="date" placeholder="选择开始日期" 
            v-model="seachObj.beginTime" style="width: 40%;" 
            :picker-options="startDatePicker"
             @change="dateChangeBeginTime"></el-date-picker>
至
<el-date-picker type="date" placeholder="选择结束日期" 
            v-model="seachObj.endTime" style="width: 40%;" 
            :picker-options="endDatePicker" 
            @change="dateChangeEndTime"></el-date-picker>

data(){
    startDatePicker:this.beginDate(),
    endDatePicker:this.processDate(),
},

methods:{
    beginDate(){//提出开始时间必须小于今天
        let self = this
        return {
            disabledDate(time){
                return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
        }
    },
    processDate(){//提出结束时间必须大于提出开始时间
        let self = this
        return {
            disabledDate(time){
                if(self.seachObj.beginTime){
                    return new Date(self.seachObj.beginTime).getTime() > time.getTime()
                }else{
                    return time.getTime() > Date.now()
                    //开始时间不选时，结束时间最大值小于等于当天
                }
            }
        }
    },

}