vue-element-table表格实现每一条数据绑定定时器实现倒计时或者持续时间

前言

  • 最近在开发中遇到一个需求,每一条数据前端计算处理时间,或者是倒计时时间。

  • 第一表格不可能展示所有数据,所以我们需要当前时间和数据库开始时间获取一个初始值。

  • 第二我们需要把定时器持续时间绑给每一条数据中,方便展示,和操作时候传递给后端存储。

  • 这样一来就解决这个需求,并且不管展示多少数据都不会出错,而且用户体验感较好.

代码实现-可以直接赋值看案例

html 复制代码
<template>
  <div class="app-container">
    <el-table :data="tableData" v-loading="loading" border style="width: 100%">
      <el-table-column prop="a" label="视频类别" align="center" />
      <el-table-column prop="b" label="开始时间" align="center" />
      <el-table-column prop="c" label="持续时间" align="center">
        <template v-slot="{ row }">{{ timeFormatdispose(row.c) }}</template>
      </el-table-column>
      <el-table-column prop="d" label="更新时间" align="center" />
​
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template v-slot="{ row }">
          <el-button @click="dispose(row)" type="text" size="small"
            >处 理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
​
<script>
export default {
  name: 'ContinueTime',
  data () {
    return {
      // 加载动画
      loading: false,
      // 表格数据
      tableData: []
    }
  },
  created () {
    // 获取数据
    this.getdata()
  },
  methods: {
    // 查询数据
    getdata () {
      // 模拟调用数据
      this.loading = true
      setTimeout(() => {
        this.tableData = [
          {
            a: '教育',
            b: '2024-1-18 00:00:00',
            c: '',
            d: '接口后端回显'
          },
          {
            a: '搞笑',
            b: '2023-12-25 12:00:00',
            c: '',
            d: '接口后端回显'
          },
          {
            a: '爱国',
            b: '1949-10-01 08:00:00',
            c: '',
            d: '接口后端回显'
          },
          {
            a: '军事',
            b: '2024-01-01 23:59:59',
            c: '',
            d: '接口后端回显'
          }
        ]
        // 给每一个数据绑定一个定时器
        // 报错-forEach-是因为表格数组键名不一样
        this.tableData.forEach(el => {
          //调用定时器-传入每一条数据
          this.continueTime(el)
        })
      }, 1500)
      this.loading = false
    },
    // 持续时间计算
    continueTime (row) {
      // 用当前时间-开始时间 获取一个时间初始值 转换成时间戳方便计算
      // row.b-是数据库每一条数据开始时间
      let calltime = new Date().getTime() - new Date(row.b).getTime()
      // row.c-是持续时间的键值
      row.c = calltime
      row.countDown = setInterval(() => {
        // 1000-一秒
        // 持续时间就是 + 1000
        // 倒计时就是 - 1000 (需要处理倒计时到了时候处理)
        // 并且把值绑到每一条数据中,方便取值调用接口
        row.c = row.c + 1000
      }, 1000)
    },
    // 时间替换方法
    timeFormatdispose (Time) {
      // console.log('Time', Time)
      if (Time) {
        let days = this.addZero(Math.floor(Time / 1000 / 60 / 60 / 24)) //天
        let hours = this.addZero(Math.floor((Time / 1000 / 60 / 60) % 24)) //时
        let minutes = this.addZero(Math.floor((Time / 1000 / 60) % 60)) //分
        let seconds = this.addZero(Math.floor((Time / 1000) % 60)) //秒
        return `${days}天${hours}小时${minutes}分钟${seconds}秒`
      }
    },
    // 处理
    dispose (row) {
      console.log('持续时间',row.c);
      // 调用接口-把数据传递给后端
    }
  }
}
</script>
​
<style lang="scss" scoped></style>
复制代码

总结:

经过这一趟流程下来相信你也对 vue-element-table表格实现每一条数据绑定定时器实现倒计时或者持续时间 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

有什么不足的地方请大家指出谢谢 -- 風过无痕

相关推荐
zhanshuo12 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang13 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil15 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录22 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672222 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少27 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫