vue elementui table给表格中满足条件的每一条记录添加计时器

需求：

在前端给表格中给满足条件的每一条记录增加一个计时器，用于计算工作时长。

1.数据库中存储的有每条记录的作业开始时间，将当前时间和作业开始时间计算一个差值，作为作业时长的初始值；

2.把满足条件的每条记录绑定一个计时器，且将每条记录作业时长的初始值作为计时开始值，在此基础上每分钟增加计时；

3.数据状态变化时及时清除不需要的定时器，每次加载表格数据时清除所有的计时器，重新初始化计时器数组，重新绑定计时器。

    <el-table ref="tableData" v-loading="listLoading" :data="tableData" border stripe style="width: 100%" max-height="250" highlight-current-row>
      <el-table-column  prop="carNumber" label="车牌号"  align="center" />
      <el-table-column prop="carState" label="车辆状态" align="center"  />
      <el-table-column prop="workStartTime" label="作业开始时间" align="center" />
      <el-table-column prop="workEndTime" label="作业结束时间" align="center"/>
      <el-table-column prop="duration" label="作业时长(分)" align="center" />
      <el-table-column align="center" label="操作" fixed="right" width="240" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="endRow(scope.$index, scope.row)">结束工作</el-button>
        </template>
      </el-table-column>
    </el-table>
  <script>
  	export default {
  		data() {
  			return {
      			tableData: [],  //列表数据
  				timers: [] // 计时器数组
  			}
		},
		mounted() {
	    	// 加载表格数据
	    	this.getDataList()
  		},
  		beforeDestroy() {
		    if (this.timers.length > 0) {
		      // 清除所有的定时器
		      this.timers.forEach((timer) => {
		        clearInterval(timer)
		      })
		    }
  		},
  		methods:{
  			// 加载表格数据
  			getDataList() {
		      if (this.timers.length > 0) {
		        // 清除所有的定时器
		        this.timers.forEach((timer) => {
		          clearInterval(timer)
		        })
		      }
		      // 初始化计时器数组
		      this.timers = []
		      // 调用后台接口获取表格数据(此处省略.)
		      
		      // 给符合条件的每条数据绑定一个计时器
	      	  this.tableData.forEach((element) => {
	          	if (element.carState === '3') {
	          		//调用计时器，传入每条数据
	            	this.continueTime(element)
	          	}
	          })
		
		   },

	   	   // 持续时间计算
	    	continueTime(row) {
	      		//用当前时间-工作开始时间,获取一个时间初始值,转换成时间戳方便计算,单位是毫秒
	      		let calltime = new Date().getTime() - new Date(row.workStartTime).getTime()
	      		// row.duration-是持续时间的键值,转换成分钟 (即为当前实际工作时长)
	      		row.duration = Math.floor(calltime / 1000 / 60)
	      		let intervalId = setInterval(() => {
	        		// 1000-一秒, 1000*60_一分钟
	        		// 持续时间就是 + 1min
	        		// 并且把值绑到每一条数据中，方便取值调用接口
	        		row.duration = row.duration + 1
	        		console.info(row.carNumber + ' , ' + row.duration + ' , ' + intervalId)
	      		}, 1000 * 60)
	      		// 把计时器添加到数组中
	      		this.timers.push(intervalId)
	      	},
	      	//结束工作
			endRow(index, row) {
				console.info('工作时长为:'+row.duration)
				//调用接口处理数据
          		CARAPI.endInfo(row).then((res) => {
          			//重新加载数据
            		this.getDataList()
            		this.$message({type: 'success',message: '作业已结束!'})
          		})
			}

		}
  	}
  </script>

效果图：

一分钟后，界面上的作业时长(分)自动刷新为：