这是用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
})
Logo

前往低代码交流专区

更多推荐