數(shù)據(jù)處理
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)
},
// 清除所有定時(shí)器
clearAll(list) {
list.forEach(el => {
window.clearInterval(el.countDown)
})
},
// 獲取列表數(shù)據(jù)
getPageList (){
queryList().then(res => {
this.tableData = res.data
this.tableData.forEach(item => {
this.formatterTime(item)
})
}
}
}
過(guò)濾器(在main.js里面掛載)
export function daojishi(mistiming) {
if (mistiming > 0) {
var days = Math.floor(mistiming / 1000 / 60 / 60 / 24) // 獲取天數(shù)
var hours = Math.floor(mistiming / 1000 / 60 / 60 % 24) // 獲取小時(shí)
var minutes = Math.floor(mistiming / 1000 / 60 % 60) // 獲取分鐘數(shù)
var seconds = Math.floor(mistiming / 1000 % 60) // 獲取秒數(shù)
// 判斷天蹦肴、時(shí)、分、秒是不是兩位數(shù)，如果是直接輸出，如果不是在前邊加個(gè)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 + "時(shí)" + minutes + "分" + seconds + "秒";
// 第二種連接方法
var rels = `${hours}:${minutes}:${seconds}`
}
// 判斷時(shí)間差是不是正數(shù)崖媚，就是截止時(shí)間是不是比現(xiàn)在的時(shí)間晚
var mis = mistiming > 0 ? rels : '已超時(shí)'
return mis
}
頁(yè)面使用
<template>
<el-table ref="tableData" :data="tableData" border>
<el-table-column
prop="expiretimestamp"
label="倒計(jì)時(shí)"
width="120"
>
<template slot-scope="scope">
<!-- 自定義的過(guò)濾器 -->
<div class="daojishi">{{ scope.row.expiretimestamp|daojishi }}</div>
</template>
</el-table-column>
</el-table>
</template>
