开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

前言

在表格展示数据时，如果不对后端返回的数据处理，默认展示时间戳

<el-table-column
  :label="$t('msg.article.publicDate')"
  prop="publicDate"
></el-table-column>

而我们的需求是展示相对时间，同时对其进行国际化处理

相对时间处理

安装day.js

npm install dayjs

处理相对时间，可以使用dayjs中的RelativeTime

示例

dayjs().to(dayjs('1990-01-01')) // 31 年前

我们使用全局属性处理相对时间

新建filters/index.js

引入dayjs

import dayjs from 'dayjs'

引入相对时间插件

import rt from 'dayjs/plugin/relativeTime'

加载插件

dayjs.extend(rt)

然后声明relativeTime方法将时间戳转化为相对时间

function relativeTime(val) {
  if (!isNaN(val)) {
    val = parseInt(val)
  }
  return dayjs().to(dayjs(val))
}

将其挂载在全局属性上

export default (app) => {
  app.config.globalProperties.$filters = { dateFilter, relativeTime }
}

在main.js中引入全局属性

// 全局属性
import installFilter from '@/filters/index'

const app = createApp(App)
installFilter(app)

最后更改模板内容，使用插槽

<el-table-column :label="$t('msg.article.publicDate')">
  <template #default="{ row }">
    {{ $filters.relativeTime(row.publicDate) }}
  </template>
</el-table-column>

效果如下

相对时间完成

国际化处理

默认情况下，dayjs只内置了英文语言配置，因此需要按需引入中文语言配置

import 'dayjs/locale/zh-cn'

接着调用 dayjs.locale 并传入一个已经加载的语言配置的名称即可

在relativeTime方法中

function relativeTime(val) {
  ···
  return dayjs()
    .locale('zh-cn')
    .to(dayjs(val))
}

之后就变为中文

但是需要根据当前的语言环境动态加载语言

使用i18n时，在store的getters中保存了当前的语言，所以获取保存的语言判断即可

relativeTime方法

function relativeTime(val) {
  ···
  return dayjs()
    .locale(store.getters.language === 'zh' ? 'zh-cn' : 'en')
    .to(dayjs(val))
}

国际化处理完成