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

站长

2024年06月30日 08:40 · 阅读数 6

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)

1个回答

test

2024-06-30

使用的最开始提供的 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>

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容