element-ui日期筛选:选择日期即触发查询

需求：日期范围选择器，当选择好一个日期范围时，立即触发查询功能

<el-date-picker
    v-model="dateVal"
    type="daterange"
    size="small"
    format="yyyy 年 MM 月 dd 日"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOption"
    :default-time="['00:00:00', '23:59:59']">
</el-date-picker>

js代码：

<script type="text/ecmascript-6">
    import Detail from './detail'
    import API from 'api/api_list'

    export default {
        data() {
            return {
                loading: false,
                dateVal: '',
                pickerOption: { // 自定义周期快捷选项
                    shortcuts: [{
                        text: '最近一周',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            this.searchChangeDate();
                        })
                    }, {
                        text: '最近一个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            this.searchChangeDate();
                        })
                    }, {
                        text: '最近三个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            this.searchChangeDate();
                        })
                    }, {
                        text: '最近半年',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                            picker.$emit('pick', [start, end]);
                            this.searchChangeDate();
                        })
                    }, {
                        text: '最近一年',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0);
                            start.setMinutes(0);
                            start.setSeconds(0);
                            end.setHours(23);
                            end.setMinutes(59);
                            end.setSeconds(59);
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                            this.searchChangeDate();
                        })
                    }],
                    onPick: (dateRange => {
                        if(!dateRange.maxDate) {
                            return;
                        }
                        this.dateVal = [dateRange.minDate, dateRange.maxDate];
                        this.searchChangeDate();
                    })
                },
            }
        },
        created() {
            this._getLists();
        },
        methods: {
            // 日期筛选
            searchChangeDate() {
                if (this.dateVal) {
                    this._getLists();
                }
            },
            //获取列表信息
            _getLists() {
                // ...
            }
        },
    }
</script>