如何在vue项目中格式化时间

1.安装dayjs包

安装格式化时间的第三方包dayjs

npm i [email protected] -S

2.两种方式:

2.1 全局过滤器的使用

在项目入口文件 main.js 中导入并使用 dayjs，定义全局过滤器：

import dayjs from 'dayjs'

// 定义全局过滤器
Vue.filter('dateFormat', date => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
})

在 项目.vue 组件中，调用全局过滤器，对时间进行格式化：

<el-table-column label="发表时间">
  <!-- 想要自定义某一列数据要渲染成什么样子，就需要使用插槽 -->
  <template v-slot="scope">
    {
   
   { scope.row.pub_date | dateFormat }}
  </template>
</el-table-column>

2.2 在项目组件中自定义属性渲染调用方法使用

在 项目.vue 组件中, 导入并使用 dayjs

import dayjs from 'dayjs'

 在组件中使用插槽:

<-- 存放自定义的结构，需要使用插槽 -->
<el-table-column
label="发表时间">
  <template v-slot="obj">
    {
   
   { dateFormat(obj.row.pub_date) }}
  </template>
</el-table-column>

 在methods:函数中格式化时间

// 格式化时间
dateFormat(date) {
  // 使用 dayjs 处理时间
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}