el-table-column 使用 moment
时间: 2023-10-24 09:11:59 浏览: 39
在 el-table 中使用 moment.js 可以非常方便地格式化日期或时间。具体步骤如下:
1. 首先需要安装 moment.js,可以使用 npm install moment 命令安装。
2. 在 el-table-column 中使用 scoped slot,将数据先格式化为 moment 对象。
```html
<el-table-column prop="date">
<template slot-scope="scope">
{{ moment(scope.row.date).format('YYYY-MM-DD') }}
</template>
</el-table-column>
```
在上面的代码中,prop 指定了该列要显示的数据的属性名,而在 scoped slot 中,我们先将数据格式化为 moment 对象,然后调用 moment 对象的 format 方法,将其格式化为指定的日期格式。
3. 如果数据中包含时间信息,可以将 format 方法的参数改为 'YYYY-MM-DD HH:mm:ss',或者其他合适的时间格式。
```html
<el-table-column prop="datetime">
<template slot-scope="scope">
{{ moment(scope.row.datetime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
```
上面的代码中,prop 指定了该列要显示的数据的属性名,而在 scoped slot 中,我们先将数据格式化为 moment 对象,然后调用 moment 对象的 format 方法,将其格式化为指定的时间格式。
通过使用 moment.js,我们可以轻松地在 el-table 中格式化日期和时间。