年月日时分秒的时间格式如何在el-table-column中显示
时间: 2024-10-17 16:10:41 浏览: 30
微信小程序 -- 年月日时分秒 picker 选择器
在Element UI的`el-table-column`中显示包含年月日时分秒的时间格式,你可以通过`formatter`属性自定义每个单元格的数据展示方式。以下是一个简单的例子:
```html
<template>
<el-table :data="tableData">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="datetime" label="日期时间" formatter="formatDateTime"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
formatDateTime(value) {
// 使用JavaScript的Date对象格式化时间
const date = new Date(value);
return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
}
},
data() {
return {
tableData: [
{ datetime: '2023-04-15 13:45:30' }, // 这里是你实际的数据格式
// ... 更多数据...
]
};
}
};
</script>
```
在这个示例中,`formatDateTime`方法接收表格中的时间字符串,然后创建一个`Date`对象并按照`YYYY-MM-DD HH:mm:ss`的格式返回。记得替换`tableData`中的日期为你实际需要的数据。
阅读全文