前言

• 最近在開發(fā)中遇到一個需求，每一條數(shù)據(jù)前端計算處理時間，或者是倒計時時間。

• 第一表格不可能展示所有數(shù)據(jù)，所以我們需要當(dāng)前時間和數(shù)據(jù)庫開始時間獲取一個初始值。

• 第二我們需要把定時器持續(xù)時間綁給每一條數(shù)據(jù)中，方便展示，和操作時候傳遞給后端存儲。

• 這樣一來就解決這個需求，并且不管展示多少數(shù)據(jù)都不會出錯，而且用戶體驗感較好.

代碼實現(xiàn)-可以直接賦值看案例

<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="持續(xù)時間" 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,
 ? ?  // 表格數(shù)據(jù)
 ? ?  tableData: []
 ?  }
  },
  created () {
 ?  // 獲取數(shù)據(jù)
 ?  this.getdata()
  },
  methods: {
 ?  // 查詢數(shù)據(jù)
 ?  getdata () {
 ? ?  // 模擬調(diào)用數(shù)據(jù)
 ? ?  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: '接口后端回顯'
 ? ? ? ?  }
 ? ? ?  ]
 ? ? ?  // 給每一個數(shù)據(jù)綁定一個定時器
 ? ? ?  // 報錯-forEach-是因為表格數(shù)組鍵名不一樣
 ? ? ?  this.tableData.forEach(el => {
 ? ? ? ?  //調(diào)用定時器-傳入每一條數(shù)據(jù)
 ? ? ? ?  this.continueTime(el)
 ? ? ?  })
 ? ?  }, 1500)
 ? ?  this.loading = false
 ?  },
 ?  // 持續(xù)時間計算
 ?  continueTime (row) {
 ? ?  // 用當(dāng)前時間-開始時間 獲取一個時間初始值 轉(zhuǎn)換成時間戳方便計算
 ? ?  // row.b-是數(shù)據(jù)庫每一條數(shù)據(jù)開始時間
 ? ?  let calltime = new Date().getTime() - new Date(row.b).getTime()
 ? ?  // row.c-是持續(xù)時間的鍵值
 ? ?  row.c = calltime
 ? ?  row.countDown = setInterval(() => {
 ? ? ?  // 1000-一秒
 ? ? ?  // 持續(xù)時間就是 + 1000
 ? ? ?  // 倒計時就是 - 1000 （需要處理倒計時到了時候處理）
 ? ? ?  // 并且把值綁到每一條數(shù)據(jù)中，方便取值調(diào)用接口
 ? ? ?  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('持續(xù)時間',row.c);
 ? ?  // 調(diào)用接口-把數(shù)據(jù)傳遞給后端
 ?  }
  }
}
</script>
?
<style lang="scss" scoped></style>

?

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue-element-table表格實現(xiàn)每一條數(shù)據(jù)綁定定時器實現(xiàn)倒計時或者持續(xù)時間 有了初步的深刻印象，但在實際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

有什么不足的地方請大家指出謝謝 -- 風(fēng)過無痕文章來源地址http://www.zghlxwxcb.cn/news/detail-807680.html

到了這里，關(guān)于vue-element-table表格實現(xiàn)每一條數(shù)據(jù)綁定定時器實現(xiàn)倒計時或者持續(xù)時間的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！