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

前言

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

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

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

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

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

<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表格实现每一条数据绑定定时器实现倒计时或者持续时间 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

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