Vue表格中时间的处理
Vue 处理 时间 表格
2023-09-27 14:24:14 时间
Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化。
这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2k大小。安装方式简单,只需要npm install fecha --save
即可。
Formatting(日期格式化)
fecha提供一个format方法。fecha.format接收一个Date对象(或一个时间戳)和一个字符串形式的日期格式,然后返回一个字符串(处理后的日期)。
注意: 当传入的参数无效时,fecha会报错
Parsing(日期解析)
fecha另外提供了一个parse方法。和format类似,fecha.parse接收一个Date字符串和一个字符串形式的日期格式,然后返回一个Date对象。
注意: 当传入的参数无效时,fecha会报错
fecha还有其他很多功能,这里不做具体介绍,有兴趣请自行百度学习。
这里放一个demo,以供参考。
html
<el-table-column prop="time" label="时间" :formatter="dateFormat" min-width="100"></el-table-column>
js
methods: { dateFormat(row, column, cellValue) { return cellValue ? fecha.format(new Date(cellValue), 'YYYY-MM-DD') : ''; } }
恩,就酱~
相关文章
- Vue-CLI项目-vue-cookie与vue-cookies处理cookie
- vue 项目中命名方法
- 如何下载vue.js
- vue.js计算属性的setter和getter方法
- Vue国际化处理 vue-i18n 以及项目自动切换中英文
- Vue学习笔记之Element-UI表单校验中的多层嵌套处理
- vue组件通信
- Vue.js的复用组件开发流程
- vue-cli webpack配置cdn路径 以及 上线之后的字体文件跨域处理
- vue项目优化--使用CDN和Gzip
- 【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台(中)
- vue系列:使用URLSearchParams处理axios的请求数据
- 前端vue正则表达式-隐私脱敏处理
- Vue.js动画在项目使用的两个示例
- vue中需要注意的问题总结(上)
- 详解Vue组件系统
- 组件改变生活_揭开Vue组件的神秘面纱
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航