当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 23:38:15

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

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 + 1console.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>