在vue&element里怎么给列表每一列写倒计时(给每一列绑定计时器)
需求:列表每一列都有独立的倒计时,后台list将会返回剩余时间的时间戳,前端做倒计时主要思路:给每列数据绑定一个独立的定时器,再每一秒把时间戳字段的值-1000js://获取列表onload(page, query) {getMemberList(params).then(res => {this.page.total = res.data.data.total;this.tableData
·
需求:列表每一列都有独立的倒计时,后台list将会返回剩余时间的时间戳,前端做倒计时
主要思路:给每列数据绑定一个独立的定时器,再每一秒把时间戳字段的值-1000
js:
//获取列表
onload(page, query) {
getMemberList(params).then(res => {
this.page.total = res.data.data.total;
this.tableData = res.data.data.records;
//给每一列生成一个时间戳
this.tableData.forEach(el=>{
el.excessTime=Date.now();//模拟后端发的时间戳
this.daojishi(el);//调用定时器
})
});
},
// 倒计时定时器
daojishi(row) {
row.countDown = setInterval(() => {
if(row.excessTime>0){
row.excessTime = row.excessTime - 1000;}
else{
clearInterval(row.countDown)
}
}, 1000);
},
// 清除所有定时器
clearAll(list){
list.forEach(el=>{
clearInterval(el.countDown)
})
}
过滤器(记得注册):
export function daojishi(mistiming) {
//也可以传截止的具体时间,改一下参数
// var newtime = new Date() //获取当前时间
// var storptime = new Date(storptimes) //获取截止时间
// var mistiming = storptime.getTime() - newtime.getTime() // 获取截止时间距离现在的毫秒差
if(mistiming>0){
var days = Math.floor(mistiming / 1000 / 60 / 60 / 24); //获取天数
var hours = Math.floor(mistiming / 1000 / 60 / 60 % 24); // 获取小时
var minutes = Math.floor(mistiming / 1000 / 60 % 60); //获取分钟数
var seconds = Math.floor(mistiming / 1000 % 60); //获取秒数
// 判断天、时、分、秒是不是两位数,如果是直接输出,如果不是在前边加个0;
days < 10 ? days = "0" + days : days;
hours < 10 ? hours = "0" + hours : hours;
minutes < 10 ? minutes = "0" + minutes : minutes;
seconds < 10 ? seconds = "0" + seconds : seconds;
// 第一种连接方法
// var rels = days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
// 第二种连接方法
var rels = `${days}天${hours}时${minutes}分${seconds}秒`}
// 判断时间差是不是正数,就是截止时间是不是比现在的时间晚
var mis = mistiming > 0 ? rels : "已超时"
return mis
}
element:
<el-table-column label="操作">
<template slot-scope="scope">
<div class="timefloat">
<i class="el-icon-time yellow_text" style="font-size:14px"></i>
{{scope.row.excessTime|daojishi}}
</div>
</el-table-column>
效果:现在是假数据
更多推荐
已为社区贡献3条内容
所有评论(0)