vxe-column如何格式化时间戳
时间: 2024-01-27 14:03:55 浏览: 78
基于 vxe-table 表格的适配插件,用于兼容 ant-design-vue 组件库
vxe-column 是 Element-UI 的一个表格组件,用于渲染表格列。如果需要在表格列中展示时间戳,并将其格式化成可读性更好的日期时间字符串,可以通过以下方式实现:
1. 在定义表格列时,使用 `formatter` 属性自定义列内容的渲染函数,例如:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="timestamp" label="时间戳" :formatter="formatTimestamp"></el-table-column>
</el-table>
</template>
```
2. 在组件中定义 `formatTimestamp` 函数,该函数接收当前单元格的值作为参数,在函数内部使用 JavaScript 内置的 `Date` 对象对时间戳进行格式化,例如:
```js
export default {
data() {
return {
tableData: [
{ id: 1, timestamp: 1633024391000 },
{ id: 2, timestamp: 1633024452000 },
{ id: 3, timestamp: 1633024523000 }
]
}
},
methods: {
formatTimestamp(row, column, cellValue) {
const date = new Date(cellValue)
return date.toLocaleString()
}
}
}
```
在上述代码中,`formatTimestamp` 函数将时间戳转换为 `Date` 对象,并使用 `toLocaleString` 方法将其转换为本地时间格式的字符串。你可以根据自己的需求,使用不同的 `Date` 对象方法对时间戳进行格式化。
阅读全文