数据处理
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>