在element-ui在双大括号中使用时间处理函数

问题

在vue项目中有时需要将时间戳转为时间格式，但是elementUI自带的方法只能在table中才行，而需求是在双大括号中直接使用，将后端传过来的时间戳转为时间格式（这里只需要时分秒，年月日的可以根据需求更改即可）。

解决方法

vue通过了过滤器，通过使用过滤器可以解决当前的需求。（前往vue过滤器）

代码

<template>
	<div>
		<div v-for="item in list" :key="item.id">
			<label class="">时间：</label><span>{{ item.timestamp | timestampToTime }}</span>
		</div>
	</div>
</template>
<script>
export default {
  data() {
  	return{
  		list: [
        	{ id: 1, timestamp: '1693466569261' },
        	{ id: 2, timestamp: '1693466569361' },
        	{ id: 3, timestamp: '1693466569251' },
       		{ id: 4, timestamp: '1693466559261' },
        	{ id: 5, timestamp: '1693466579261' }
		]
  	}
  }
  filters: {
    // 过滤器
    timestampToTime: function (time) {
      time = parseInt(time) * 1000 // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const date = new Date(time) 
      let hour = '00'
      let minute = '00'
      let seconds = '00'
      if (date >= 60) { // 大于60s,即变成分钟+秒，
        minute = Math.floor(date / 60)
        seconds = Math.floor(date % 60)
        seconds = seconds < 10 ? '0' + seconds : seconds
        if (minute >= 60) { // 大于60min，即变成小时+分钟
          hour = Math.floor(minute / 60)
          hour = hour < 10 ? '0' + hour : hour
          minute = Math.floor(minute % 60)
          minute = minute < 10 ? '0' + minute : minute
        } else {
          minute = minute < 10 ? '0' + minute : minute
        }
      } else {
        seconds = date < 10 ? '0' + date : date
      }
      return hour + ':' + minute + ':' + seconds
    }
  },
 }
 </script>