element ui 实现列绑定按照指定时间显示倒计时

table

intervalTime 是我设置的一个名为变量时间的属性

<el-table-column label="剩余逾期时间" align="center" prop="intervalTime">
     <template slot-scope="scope">
       <span style="color: red"> <i class="el-icon-time"></i>{{scope.row.intervalTime}}</span>
     </template>
</el-table-column>

Vue

//获取数据，在获取数据的时候调用绑定列计时
getList() {
      this.loading = true;
      listCirculation(this.queryParams).then(response => {
        this.circulationList = response.rows;
        this.total = response.total;
        this.loading = false;
        if(this.circulationList.length > 0){
          this.circulationList.forEach((el)=>{
            this.countDown(el)
          })
        }
      });
   },
    /** 倒计时*/
    countDown(row) {
    // acceptanceOverTime 是我后台返回的截止时间
      if(row.status == 1){
        let thi = this;
        setInterval((thi) => {
          row.intervalTime =  thi.formatDuring(new Date(row.acceptanceOverTime) - new Date());
        }, 10000); //这边采取的是10秒调用一次
        //这里采用简单写法，直接在查询的时候调用一次，不用等定时器调用
        row.intervalTime = this.formatDuring(new Date(row.acceptanceOverTime) - new Date());
      }
    },
    formatDuring (mss) {
      if(mss > 0){
        let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) // 得到小时
        let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60)) // 得到分钟数
        //获取分钟
        let str1 = minutes < 10 ? ('0' + minutes) : minutes
        
        /*得到秒数
        let seconds = (mss % (1000 * 60)) / 1000
        let str2 = seconds < 10 ? ('0' + seconds) : seconds*/
        return hours + '小时' + str1 + '分钟';
      }else{
        return '已逾期';
      }
    },