elmentui表格时间显示yyyy-MM-dd
时间: 2024-04-28 11:15:51 浏览: 141
Element UI是一套基于Vue.js的组件库,提供了丰富的UI组件,包括表格组件。在Element UI的表格组件中,可以通过设置formatter属性来自定义时间的显示格式。
要在Element UI的表格中显示时间,可以使用moment.js库来格式化时间。首先,你需要在项目中引入moment.js库。然后,在表格的列定义中,使用formatter属性来指定时间的显示格式。
以下是一个示例代码,展示如何在Element UI的表格中显示时间为yyyy-MM-dd格式:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
</el-table>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
tableData: [
{ date: '2022-01-01' },
{ date: '2022-02-01' },
{ date: '2022-03-01' },
],
};
},
methods: {
formatDate(row, column) {
return moment(row.date).format('YYYY-MM-DD');
},
},
};
</script>
```
在上述代码中,我们通过引入moment.js库,并在formatDate方法中使用moment(row.date).format('YYYY-MM-DD')来将日期格式化为yyyy-MM-dd格式。然后,在表格列的formatter属性中指定formatDate方法作为格式化函数。
这样,当表格渲染时,日期会以yyyy-MM-dd的格式显示出来。
阅读全文