elmentUi时间选择器 Vue

element中的时间选择器中参数，这些代码主要的功能是通过前端的时间选择来显示网页上的数据，前端通过选择器选择的时间区间

         其中起始时间和终止时间都保存在 value2 这个字段中的  但是存储的数据不是后端能够直接处理的，需要对时间类型进行转化， 在我的另一篇文章中有相对应的解决办法   ，存储在其中的格式是一个数组类型，传给后端定义两个字段分别为 startTime 和 endTime  ，这两个字段在执行查询页面操作的方法的时候就进行赋值计算，从选择器中获取的赋值上去，

            var _this = this;
            _this.pageData.startTime = _this.timeTrans(_this.value2[0]);
            _this.pageData.endTime = _this.timeTrans(_this.value2[1]);

时间选择器拥有快捷选项的操作主要的属性就是 :picker-option = pickerOptions: 

            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [],
            value2: [],

总的代码如下(其中分页展示数据的操作没有放上来 只有时间选择器的部分代码  相对完整)：

            <div class="block">
                <span class="demonstration" >请选择订单生成日期</span>
                <el-date-picker
                        v-model="value2"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="loadData">
                </el-date-picker>
            </div>



new Vue({
        el: '#app',
        data: {
            buyRecordList: [],
            pageData: {
                page: 1,
                size: 5,
                startTime:"",
                endTime:"",
            },
            pickerOptions: {
                shortcuts: [{
                    text: '本月',
                    onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                    }
                }, {
                    text: '今年至今',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [],
            value2: [],
            total: 0,

        },
        methods: {
            loadData() {
                var _this = this;
                _this.pageData.startTime = _this.timeTrans(_this.value2[0]);
                _this.pageData.endTime = _this.timeTrans(_this.value2[1]);
                console.log(_this.pageData.endTime)
                $.ajax({
                    url: 'http://localhost:8080/chenBuyRecord/selectUserBuyRecord',
                    dataType: 'json',
                    type: 'post',
                    data:this.pageData,
                    success: function (rs) {
                        console.log(rs);
                        _this.buyRecordList = rs.data.records;
                        _this.total = rs.data.total;
                    }, error: function () {
                        _this.$message("登录服务器报错");
                    }
                })
            },
            handleSizeChange(newSize) {
                this.pageData.size = newSize;
                this.loadData();
            },
            handleCurrentChange(newPage) {
                this.pageData.page = newPage;
                this.loadData();
            },
            timeTrans(time){
                /*首先需要判断时间是否是空的  如果不判断的话就会出现错误，时间转换格式为空  空的时间肯定无法进行转换*/
                if (time==null || time== ''){
                    return null;
                }
                let date = new Date(new Date(time).getTime() + 8 * 3600 * 1000)
                date = date.toJSON();
                date = date.substring(0, 10)
                return date
            }

        },
        mounted() {
            var _this = this;
            /*这里需要使用一个域对象来存储用户的姓名 */
            _this.pageData.userName ="小马";
            this.loadData();
        }
    })
}