> 使用element-table的时候,工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里,可以用element-ui表格自带的:formatter函数,来格式化表格内容:
1. 新建一个js文件用来转换时间戳
```
export function timeFormat(data) { // 返回年月日时分秒
if (data) {
const date = new Date(data)
const year = date.getFullYear()
const month = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
const day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
const hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
const minutes = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
const seconds = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
}
}
export function timeMonth(data) { // 返回年月日
if (data) {
const date = new Date(data)
const year = date.getFullYear()
const month = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
const day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
return year + '-' + month + '-' + day
}
}
```
2. 在HTML位置
```
<el-table border >
<el-table-column lable="时间" prop="createTime" :formatter="formatTime"></el-table-column>
</el-table>
```
```
<!-- 引入js -->
import { timeMonth } from "@/utils/timeFormat.js";
methods : {
formatTime(row, col, val) { // 表格时间格式化
return timeMonth(val); // 显示为年月日
},
}
```
- 前言
- 写在前言
- 一些开发遇到的问题
- H5标签中的属性控制
- el-table的每个对象的属性值
- el-form多个表单同时验证必填项
- el-table 修改表头
- el-input的多种验证
- vue键盘回车事件
- blob导出
- table中selectable( 是否勾选)
- 手动更新视图
- 日期选择器,自定义可选范围
- select 自定义搜索
- 监听回车事件
- 表格初始化不可勾选
- el-input输入限制
- table时间格式转换
- table自适应高度
- JS问题记录
- js字符数组转换为数字数组
- js防抖和节流
- JS电脑是否有网判断
- JS属性记录
- 遍历方法(12个)
- 改变原数组(9个)
- 不改变原数组(8个)
- JS数组、字符串常用方法
- 遍历对象
- Vue
- vue-router
- vue-router 如何在新窗口打开页面
- vue-router 之 keep-alive缓存篇
- keep-alive项目案例
- 路由知识点归纳总结
- params、query传参
- vue问题记录
- vuejs npm chromedriver 报错
- vuex
- vuex个人理解
- Vuex的简单实例应用