使用饿了么布局标签循环遍历出表格(如下图)，现在如何获取Time的时间，让时间可以实时更新而不是写死的数据？

Z时代
2024-02-22
分类：IT

UI:

模板代码：

<template>
  <div class="wrapper" ref="scrollTable">
    <!-- 循环遍历数组中每一项 -->
    <el-row v-for="(item, index) in list " :key="index" class="table-col">
      <el-col v-for="( item2, index2 ) in  item " :key="index2" :span="24 / item.length" class="table-item">
        <span :class="getTitleClass(item2)">{{ item2.title }}</span>
        <span :class="getValueClass(item2, 1, 2)">{{ item2.value }}</span>
      </el-col>
    </el-row>
  </div></template>

传入数据：

parentList: [
        [{ title: '工站', value: 'OP_40' }],
        [{ title: 'SN', value: '0123456789' }, { title: 'Time', value: '11:22' }],
        [{ title: 'Result', value: 'OK/NG' }],
        [{ title: '加压力', value: '123.00KN' }, { title: '加压力', value: '123.00KN' }],
        [{ title: '产品高度', value: '123.45mm' }, { title: '产品高度', value: '123.45mm' }],
        [{ title: '最总判定', value: 'OK' }, { title: '最总判定', value: 'OK' }]      ]

获取需要实时更新时间的单元格：

 if (rowIndex === 1 && colIndex === 2) {
            const newArr = this.list.filter(arr => {
              console.log(arr)
              return Array.isArray(arr)
            })
              .map(item => {
                const time = Date.now()
                item.value = time
                return item.value
              })            console.log(newArr)

回答：

使用的最开始提供的 Template 模板来写的示例代码，因为后面更新的内容有点多，不好做判断依据，所以简单写了一个，希望OP可以理解。

<template>
<el-row v-for="(item, index) in list " :key="index" class="table-col">
  <el-col  v-for="( item2, index2 ) in  item "  :key="index2" :span="24 / item.length" class="table-item">
    <span :class="[item2.title === 'Result' ? activeCls : '', item2.title === 'SN' ? 'darkblue' : '', item2.title === 'Time' ? 'green' : '', item2.title === '工站' ? 'green' : '', labelCls ]" >
      {{ item2.title }}
    </span>
    <span :class="[item2.value === 'NG' ? activeCls : '', valueCls]">
      {{ item2.title === 'Time' ? timeString : item2.value }}
    </span>
  </el-col>
</el-row>
</template>
<script>
export default {
  data() {
    return {
      timeString: '',
    }
  },
  mounted() {
    this.timer = setInterval(() => {
       this.timeString = new Date().toLocaleTimeString()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}</script>

回答：

export default {
  data() {
    return {
      currentTime: '',
      list: [
        // ...
      ]
    };
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
  methods: {
    updateTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}:${seconds}`;
      // 更新list中的Time值
      this.list[1][1].value = this.currentTime;
    }
  }
};