Vue-ElementUI框架-区间日期控件回显并提交 [时间戳->Date对象]

页面A

页面B

需求

勾选页面A，点击修改，弹出页面B，日期回显至控件里面

vue代码

页面A

		// 打开修改弹框
			editHandle() {
				//传递数据
				var data = this.dataListSelections[0];
				let time1 = new Date(data.dateFrom);
				let time2 = new Date(data.dateTo);
				let timeSelector = [time1,time2];
				//关键的一步
				data.timeSelector = timeSelector;	
				this.editData = data;
				this.doFlag = "update";
				this.addFlag = true;
			},

页面B

mounted() {
			if(this.flag == 'update') {
				this.data = this.entity;
				this.data.time = this.entity.timeSelector;
			} else {
				this.data = {};
				//this.data.time = [];
			}
		},

注意了，虽然能回显，但是如果以该数据结构去提交，数据为时间戳，那么我们要进行转换
所以需要一个方法

//日期格式化
			getDateTime(unixtimestamp) {
				var unixtimestamp = new Date(unixtimestamp);
				var year = 1900 + unixtimestamp.getYear();
				var month = "0" + (unixtimestamp.getMonth() + 1);
				var date = "0" + unixtimestamp.getDate();
				var hour = "0" + unixtimestamp.getHours();
				var minute = "0" + unixtimestamp.getMinutes();
				var second = "0" + unixtimestamp.getSeconds();
				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) +
					" " + hour.substring(hour.length - 2, hour.length) + ":" +
					minute.substring(minute.length - 2, minute.length) + ":" +
					second.substring(second.length - 2, second.length);
			},

接着，看下提交方法的代码怎么写

关键代码

let dateFrom = this.data.time[0];
let dateTo = this.data.time[1];
this.data.dateFrom = new Date(this.getDateTime(dateFrom));
this.data.dateTo = new Date(this.getDateTime(dateTo));

这样，日期就是以对象来提交，而非以字符串或时间数字来提交

更多干货，关注微信公众号