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

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

相关推荐
mosen868几秒前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js