vue项目中使用day.js转化获取的时间格式

最新推荐文章于 2024-03-26 11:30:01 发布

赵云澜

最新推荐文章于 2024-03-26 11:30:01 发布

阅读量3.6k

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_46278178/article/details/126688285

版权

这是用vue+element-ui做的

在vue中引用element ui组件库的table表格组件渲染从接口获取到的时间数据

直接渲染的时间

在这里插入图片描述
这时候，大家想转化一下时间格式，可以用day.js。这是day.js的中文网:day.js中文网

未转化时间前的代码

<el-table-column label="创建时间" prop="addtime"></el-table-column>

在vue项目中使用day.js转化的效果

在这里插入图片描述我这里用的是day.js中的 ‘YYYY-MM-DD HH:mm:ss’ 时间格式
day.js时间格式知识点看这个:支持的解析占位符列表：

在vue中通过day.js转化时间格式步骤

1.在终端使用npm安装day.js
npm install dayjs -S
在这里插入图片描述
2.在main.js中导入

// 导入day.js文件
import dayjs from 'dayjs'

在这里插入图片描述
3.在渲染时间数据的代码中设置插槽

<el-table-column label="创建时间">
	<!-- 通过 Scoped slot 可以获取到 row, column,
	 $index 和 store（table 内部的状态管理）的数据 -->
	<template slot-scope="scope">
		<!-- addtime 是接口的字段 -->
		<!-- | 管道符 -->
		<!-- 设置全局过滤器 名为dateChage -->
		{{ scope.row.addtime | dateChage }}
	</template>
</el-table-column>

4.在main.js中通过Vue构造函数的.filter()方法声明全局过滤器

// 创建一个全局过滤器，把时间格式转化成YYYY-MM-DD
// 此处也可以用箭头函数
// Vue.filter('dateChage',time => {....代码还是如下 })
Vue.filter('dateChage',function(time){
  //1.对拿到的time进行格式化处理，得到YYYY-MM-DD HH:mm:ss
  //2. 把格式化结果，return
  //直接调用dayjs()得到的是当前时间
  //dayjs(给定的时间)得到的是指定时间
  const dt = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
  return dt
})