需求:列表每一列都有独立的倒计时,后台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>

效果:现在是假数据
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐