el-date-picker 日期选择器理解

v-model="value1"

注意!!!如果在el-form表单中,也是直接绑定value1,而不是formData.value1

format="yyyy-MM-dd"

页面显示形式

value-format="yyyy-MM-dd"

拿到数据的形式

type="daterange"

日期选择类型

start-placeholder

开始日期

end-placeholder

结束日期

<template>
    <div>
        <el-date-picker
            v-model="value1"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value1: ''
        };
    },
    methods: {
        getTable() {
            if (this.ticketSaleDate) {
                console.log(this.ticketSaleDate);
                this.formData.startDate = this.ticketSaleDate[0];
                this.formData.endDate = this.ticketSaleDate[1];
            } else {
                this.formData.startDate = '';
                this.formData.endDate = '';
            }
            // this.loading = true;
            // console.log('表单参数', this.formData);
            // console.log('类型', typeof this.formData.sailingTime);
            // queryInspectionList(this.formData).then(res => {
            //     this.tableData = res.rows;
            //     this.total = res.total;
            //     this.loading = false;
            // });
        }
    }
};
</script>

解释:getTable为一个调获取数据接口的事件,我们需要在其之前加一个判断,有数据之后再删除后果-->startDate,endDate变为null

不加的话,报错如下:

或者在el-date-picker加个@change事件