vue不需要时间转换器,只写方法Columns时间格式化为YYYY-MM-DD HH:mm:ss
时间: 2024-04-23 13:27:42 浏览: 117
vue时间格式化实例代码
5星 · 资源好评率100%
如果你只是想在Vue中格式化时间并显示为`YYYY-MM-DD HH:mm:ss`的格式,你可以直接在`el-table-column`中使用过滤器来完成,而无需编写额外的方法。下面是一个示例:
```html
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="time" :formatter="formatDate"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ time: '2021-08-01T10:30:00.0' },
{ time: '2021-08-02T15:45:00.0' },
// ...
]
};
},
filters: {
formatDate(time) {
return new Date(time).toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
}
}
};
</script>
```
在这个例子中,我们使用了`el-table-column`的`:formatter`属性来指定过滤器函数`formatDate`。该过滤器函数会接收列的值作为参数,并返回格式化后的时间字符串。
在过滤器函数`formatDate`中,我们使用了JavaScript内置的`Date`对象和其对应的`toLocaleString`方法来进行时间格式化。我们将时间字符串转换为日期对象,并使用`toLocaleString`方法指定英文日期和时间格式,得到的结果即为`YYYY-MM-DD HH:mm:ss`格式的时间字符串。
这样,你就可以在Vue中直接使用过滤器来格式化时间并显示为指定的格式,而无需编写额外的方法。
阅读全文