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>