表格添加倒计时

数据处理

destroyed() {
    this.clearAll(this.tableData)
  },
methods (){
  formatterTime(row) {
      row.countDown = setInterval(() => {
        const nowtime = new Date().getTime()
        const lefttime = row.expiretimestamp - nowtime
        if (lefttime <= 0) {
          row.expiretimestamp = '-'
          window.clearInterval(row.countDown)
        } else {
          row.expiretimestamp =lefttime  - 1000
        }
      }, 1000)
    },
// 清除所有定时器
    clearAll(list) {
      list.forEach(el => {
        window.clearInterval(el.countDown)
      })
    },
// 获取列表数据
  getPageList (){
    queryList().then(res => {
      this.tableData = res.data
      this.tableData.forEach(item => {
          this.formatterTime(item)
      })
    }
  }
}

过滤器(在main.js里面挂载)

export function daojishi(mistiming) {
  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 = `${hours}:${minutes}:${seconds}`
  }
  // 判断时间差是不是正数,就是截止时间是不是比现在的时间晚
  var mis = mistiming > 0 ? rels : '已超时'
  return mis
}

页面使用

<template>
  <el-table ref="tableData" :data="tableData" border>
    <el-table-column
            prop="expiretimestamp"
            label="倒计时"
            width="120"
          >
            <template slot-scope="scope">
               <!-- 自定义的过滤器  -->
              <div class="daojishi">{{ scope.row.expiretimestamp|daojishi }}</div>
            </template>
          </el-table-column>
  </el-table>
</template>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容