在vue&element里怎么给列表每一列写倒计时(给每一列绑定计时器)

需求:列表每一列都有独立的倒计时,后台list将会返回剩余时间的时间戳,前端做倒计时

主要思路:给每列数据绑定一个独立的定时器,再每一秒把时间戳字段的值-1000
js:

//获取列表
onload(page, query) {
      getMemberList(params).then(res => {
        this.page.total = res.data.data.total;
        this.tableData = res.data.data.records;
        //给每一列生成一个时间戳
        this.tableData.forEach(el=>{
           el.excessTime=Date.now();//模拟后端发的时间戳
          this.daojishi(el);//调用定时器
        })
      });
    },
// 倒计时定时器
   daojishi(row) {
      row.countDown = setInterval(() => {
        if(row.excessTime>0){
          row.excessTime = row.excessTime - 1000;}
        else{
            clearInterval(row.countDown)
            }
      }, 1000);
    },
   // 清除所有定时器
   clearAll(list){
     list.forEach(el=>{
       clearInterval(el.countDown)
     })
   }

过滤器(记得注册):

export function daojishi(mistiming) {
//也可以传截止的具体时间,改一下参数
    // var newtime = new Date() //获取当前时间
    // var storptime = new Date(storptimes) //获取截止时间
    // var mistiming = storptime.getTime() - newtime.getTime() //   获取截止时间距离现在的毫秒差
    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 = `${days}${hours}${minutes}${seconds}秒`}

    // 判断时间差是不是正数,就是截止时间是不是比现在的时间晚
    var mis = mistiming > 0 ? rels : "已超时"
    return mis
}

element:

 <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="timefloat">
              <i class="el-icon-time yellow_text" style="font-size:14px"></i>
              {{scope.row.excessTime|daojishi}}
            </div>
</el-table-column>

效果:现在是假数据
在这里插入图片描述

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,我来给您一个基于 VueElementUI 的亚运会倒计时。 首先 Vue 项目安装 ElementUI: ``` npm install element-ui --save ``` 然后在 main.js 引入 ElementUI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接着,我们在组件使用 ElementUI 的 CountDown 组件来实现倒计时功能: ```html <template> <div class="countdown"> <el-count-down :time="countdownTime" :auto-start="false" @finish="handleFinish"> <template slot-scope="{ days, hours, minutes, seconds }"> <div class="countdown-item"> <span class="countdown-value">{{ days }}</span> <span class="countdown-label">天</span> </div> <div class="countdown-item"> <span class="countdown-value">{{ hours }}</span> <span class="countdown-label">时</span> </div> <div class="countdown-item"> <span class="countdown-value">{{ minutes }}</span> <span class="countdown-label">分</span> </div> <div class="countdown-item"> <span class="countdown-value">{{ seconds }}</span> <span class="countdown-label">秒</span> </div> </template> </el-count-down> </div> </template> <script> export default { data() { return { countdownTime: new Date('2022-09-10T00:00:00Z') // 2022年9月10日亚运会开幕时间 } }, methods: { handleFinish() { // 倒计时结束的回调函数 console.log('倒计时结束') } } } </script> <style scoped> .countdown { display: flex; } .countdown-item { display: flex; flex-direction: column; align-items: center; margin-right: 10px; } .countdown-value { font-size: 24px; font-weight: bold; } .countdown-label { font-size: 12px; color: #aaa; } </style> ``` 以上代码实现了一个简单的亚运会倒计时,其我们使用了 ElementUI 的 CountDown 组件,并设置了倒计时结束的回调函数 handleFinish。在模板使用了 slot-scope 来获取倒计时的天数、小时数、分钟数和秒数,并将它们渲染到页面上。 希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值