代码
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<!-- -->
<div class="time">实时时间:{{ timer }}</div>
<div class="CountDown">倒计时:{{ countObj.showTime }}</div>
</template>
<script>
import dayjs from "dayjs";
import utc from "dayjs/plugin/duration";
dayjs.extend(utc);
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "1王小虎",
address: " 1518",
},
{
date: "2016-05-04",
name: "2王小虎",
address: "1517",
},
{
date: "2016-05-01",
name: "3王小虎",
address: "1519",
},
{
date: "2016-05-03",
name: "4王小虎",
address: "1516",
},
],
timer: null, //实时时间
countObj: {
//倒计时
endTime: dayjs().add(5, "s").toISOString(),
showTime: "00:00:05",
},
payTimer: null,
d1: new Date(),
};
},
watch: {
// 表格动态排序
tableData(val, old) {
val.sort((a, b) => {
return a.address - b.address;
});
},
},
methods: {
// 倒计时
countDown() {
let duration = dayjs.duration(dayjs(this.countObj.endTime) - dayjs());
let hours =
duration.hours() % 24 < 10
? "0" + (duration.hours() % 24)
: duration.hours() % 24;
let minutes =
duration.minutes() % 60 < 10
? "0" + (duration.minutes() % 60)
: duration.minutes() % 60;
let seconds =
duration.seconds() % 60 < 10
? "0" + (duration.seconds() % 60)
: duration.seconds() % 60;
// 倒计时,到0结束,不可超时
// if (hours <= 0 && minutes <= 0 && seconds <= 0) {
// this.countObj.showTime = "倒计时结束";
// clearInterval(this.payTimer);
// } else {
// this.countObj.showTime = `${hours}:${minutes}:${seconds}`;
// }
// 倒计时,可超时
if (hours >= 0 && minutes >= 0 && seconds >= 0) {
if (hours == 0 && minutes == 0 && seconds == 0) {
this.d1 = dayjs().add(0, "s").toISOString();
// this.countObj.showTime = `00:00:00`;
}
this.countObj.showTime = `${hours}:${minutes}:${seconds}`;
} else {
let duration2 = dayjs.duration(dayjs() - dayjs(this.d1));
let hours =
duration2.hours() % 24 < 10
? "0" + (duration2.hours() % 24)
: duration.hours() % 24;
let minutes =
duration2.minutes() % 60 < 10
? "0" + (duration2.minutes() % 60)
: duration2.minutes() % 60;
let seconds =
duration2.seconds() % 60 < 10
? "0" + (duration2.seconds() % 60)
: duration2.seconds() % 60;
this.countObj.showTime = `${hours}:${minutes}:${seconds}`;
}
},
},
mounted() {
// 倒计时定时器
this.payTimer = setInterval(() => {
this.countDown();
}, 1000);
// 当前时间动态
setInterval(() => {
this.timer = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
}, 1000);
// mock表格中的动态数据
setInterval(() => {
this.tableData = [
{
date: "2016-05-02",
name: "1王小虎",
address: "555",
},
{
date: "2016-05-04",
name: "2王小虎",
address: "888",
},
{
date: "2016-05-01",
name: "3王小虎",
address: "444",
},
{
date: "2016-05-03",
name: "4王小虎",
address: "777",
},
];
}, 2000);
setInterval(() => {
this.tableData = [
{
date: "2016-05-02",
name: "1王小虎",
address: "33142",
},
{
date: "2016-05-04",
name: "2王小虎",
address: "23523",
},
{
date: "2016-05-01",
name: "3王小虎",
address: "12312",
},
{
date: "2016-05-03",
name: "4王小虎",
address: "45343",
},
];
}, 4000);
},
};
</script>