vxe-table-column格式化时间戳
时间: 2023-10-13 19:18:48 浏览: 290
如果你正在使用 vxe-table 表格组件,并且需要在表格中显示时间戳,你可以使用 vxe-table-column 的 formatter 属性来格式化时间戳。
具体实现步骤如下:
1. 在 vxe-table-column 中设置 formatter 属性,并编写格式化函数:
```html
<vxe-table-column label="时间" prop="timestamp" :formatter="formatTime"></vxe-table-column>
```
```javascript
methods: {
formatTime({ cellValue }) {
const date = new Date(cellValue * 1000)
return date.toLocaleString()
}
}
```
2. 在 formatTime 函数中,将时间戳转换为 Date 对象,并使用 toLocaleString 方法格式化为本地时间字符串。需要注意的是,JavaScript 中的时间戳单位是毫秒,而 vxe-table 中使用的时间戳单位是秒,需要将时间戳乘以 1000 才能得到正确的时间。
上述代码中,我们使用了 Date 对象的 toLocaleString 方法来格式化时间,这种方法的输出格式因浏览器和语言环境而异。如果需要更精确地控制时间格式,可以使用第三方时间格式化库,如 moment.js 或 day.js。例如,使用 day.js 库格式化时间:
```javascript
import dayjs from 'dayjs'
methods: {
formatTime({ cellValue }) {
return dayjs(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss')
}
}
```
这样就可以按照指定格式显示时间了。
阅读全文