vue项目中使用day.js转化获取的时间格式
vue中使用day.js转化时间
·
这是用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
})
更多推荐
已为社区贡献1条内容
所有评论(0)