vue+element时间戳转换

创建js文件处理时间

export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    )
  }
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      const str = o[k] + ''
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? str : padLeftZero(str)
      )
    }
  }
  return fmt
}

function padLeftZero (str) {
  return ('00' + str).substr(str.length)
}

```在需要的页面引入js文件

filters: {
formatDate (time) {
var date = new Date(time)
return formatDate(date, ‘yyyy-MM-dd hh:mm’)
}




{{scope.row.updateDate | formatDate}}

用作用域插槽slost插槽获取到你的时间数据   使用 |  过滤器方法处理时间              
### 如何在 Vue 中将时间戳为 `yyyy-mm-dd` 格式 在 Vue.js 开发中,可以利用多种方式实现时间戳到指定日期格式(如 `yyyy-mm-dd`)的转换。以下是几种常见的解决方案: #### 方法一:通过 JavaScript 原生函数处理 可以直接使用原生 JavaScript 的 `Date` 对象来完成此操作。 ```javascript function formatDate(timestamp) { const date = new Date(timestamp); // 将时间戳化为 Date 对象 const year = date.getFullYear(); // 获取年份 const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份并补零 const day = String(date.getDate()).padStart(2, '0'); // 获取天数并补零 return `${year}-${month}-${day}`; // 返回格式化后的字符串 } ``` 上述代码定义了一个名为 `formatDate` 的函数,用于接收时间戳作为输入,并将其转换为 `yyyy-mm-dd` 格式的字符串[^1]。 --- #### 方法二:借助第三方库 Moment.js 实现 如果项目已经引入了 `Moment.js` 库,则可以通过该库简化日期格式化的逻辑。 ```javascript import moment from 'moment'; function formatDateWithMoment(timestamp) { return moment.unix(Math.floor(timestamp / 1000)).format('YYYY-MM-DD'); } ``` 在此方法中,`Math.floor(timestamp / 1000)` 是为了将毫秒级的时间戳转换为秒级时间戳,因为 `moment.unix()` 接受的是 Unix 时间戳(单位为秒)。随后调用 `.format('YYYY-MM-DD')` 来获取目标格式的日期。 --- #### 方法三:使用 Vue 过滤器 Vue 提供了一种优雅的方式来封装通用的数据变换逻辑——即 **过滤器**。下面是一个基于过滤器的例子: ##### HTML 部分 ```html <span>{{ timestamp | formatTimestamp }}</span> ``` ##### Script 部分 ```javascript filters: { formatTimestamp(value) { if (!value) return ''; // 如果传入值为空则返回空字符串 const date = new Date(value); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } } ``` 这种方式允许你在模板中直接应用过滤器,从而减少重复代码量[^4]。 --- #### 方法四:Element UI 表格列自定义渲染 如果你正在使用 Element UI 并希望在其表格组件中展示经过格式化的时间字段,那么可以采用如下方案: ```html <el-table-column prop="timestamp" label="日期" :formatter="formatDate"></el-table-column> ``` 对应的 `formatDate` 函数可以在 Vue 组件的方法部分定义: ```javascript methods: { formatDate(row, column, cellValue) { if (!cellValue) return ''; const date = new Date(cellValue * 1000); // 注意这里假设后端传递的是秒级时间戳 const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } } ``` 这种方法特别适合需要批量显示多个记录场景下的需求[^3]。 --- ### 总结 以上介绍了四种不同的技术手段帮助开发者解决从时间戳向特定日期格式 (`yyyy-mm-dd`) 转换的问题。每一种都有其适用范围和优缺点,在实际开发过程中可以根据具体业务需求灵活选用合适的策略。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值