html部分的代码:
<el-popover
popper-class='popper_wrapper'
placement="bottom-start"
width="180"
trigger="click"
ref='popover4'
v-model= "popoverShow4">
<el-radio-group v-model="checkTime">
<el-radio label="近七天"></el-radio>
<el-radio label="近一个月"></el-radio>
<el-radio label="近三个月"></el-radio>
<el-radio :label='NowYear'></el-radio>
<el-radio :label='LastYear'></el-radio>
<el-radio :label='LastLastYear'></el-radio>
<el-radio :label='threeYearAgo'></el-radio>
</el-radio-group>
<div class='footer_wrapper'>
<div class='btn quxiao' @click='popoverShow4 = false'>取消</div>
<div class='btn sure' @click='sureSelectTime'>确认</div>
</div>
</el-popover>
//数据部分
getTableData () {
var date = new Date;
this.NowYear = date.getFullYear();
this.LastYear = this.NowYear-1;
this.LastLastYear = this.NowYear-2;
this.threeYearAgo = (this.NowYear-3) + "年及以前";
}
// js部分
// 点击确定后
sureSelectTime () {
this.popoverShow4 = false;
// console.log(this.checkTime);
if(this.checkTime == '近七天') {
this.fewDay(7);
} else if (this.checkTime == '近一个月') {
this.fewDay(30);
} else if (this.checkTime == '近三个月') {
this.fewDay(90);
} else if (typeof(this.checkTime) == 'number') {
this.year = this.checkTime;
this.YearShow(this.year);
} else {
this.year = this.threeYearAgo;
this.selectList = this.tableData.filter( (d) => {
return this.whichYearAgo(d.serveTime, this.year);
});
this.list = this.selectList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
this.sumpage = this.selectList.length;
}
},
// 计算开始和结束的时间差
mistiming (sDate1, sDate2, count) {
let aDate, oDate1, oDate2, iDays;
aDate = sDate1.split('-');
aDate[2] = aDate[2].substr(0,2);//取出日期
// console.log(aDate);
oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
aDate = sDate2.split('-');
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
if (iDays <= count) {
return sDate1;//如果小于传入的天数,筛选出数据中符合条件的数据
}
},
// 对页面数据的筛选及渲染整合到一个函数中
fewDay (count) {
this.timeForMat();
this.selectList = this.tableData.filter( (d) => {
return this.mistiming(d.serveTime, this.timer1, count);
});
// console.log(this.selectList,'selectList');
this.list = this.selectList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
this.sumpage = this.selectList.length;
},
whichYear (sDate1, year) {
let aDate, oDate1;
aDate = sDate1.split('-');
oDate1 = aDate[0];
if (oDate1 == year) {
return oDate1;//筛选出固定年份的数据
}
},
whichYearAgo(sDate1, year) {
let aDate, oDate1;
aDate = sDate1.split('-');
oDate1 = aDate[0];
if (oDate1 <= year) {
return oDate1;//筛选出3年前的数据
}
},
// 对页面数据的筛选及渲染整合到一个函数中
YearShow (year) {
this.selectList = this.tableData.filter( (d) => {
return this.whichYear(d.serveTime, year);
});
// console.log(this.selectList,'selectList');
this.list = this.selectList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage) * this.pageSize);
this.sumpage = this.selectList.length;
},
// 显示当前时间以及几年前的时间
timeForMat () {
// 拼接时间
let time1 = new Date();
time1.setTime(time1.getTime());
let Y1 = time1.getFullYear();
let M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1));
let D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate());
this.timer1 = Y1 + '-' + M1 + '-' + D1; // 当前时间
// let time2 = new Date()
// time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * (count-1)))
// let Y2 = time2.getFullYear()
// let M2 = ((time2.getMonth() + 1) > 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
// let D2 = (time2.getDate() > 10 ? time2.getDate() : '0' + time2.getDate())
// this.timer2 = Y2 + '-' + M2 + '-' + D2 //七天或30天前的数据
},
效果: