vue3实现表格根据数据动态排序,dayjs倒计时,可超时

代码

<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>