在 el-table-column 中添加 formatter 属性,设置el-table-column中的时间显示格式和颜色
时间: 2023-09-25 14:12:56 浏览: 116
好的,下面是设置 el-table-column 中时间格式和颜色的代码示例:
```html
<el-table :data="tableData">
<el-table-column prop="date" label="日期">
<template slot-scope="scope">
<!-- 使用 formatter 属性设置时间格式 -->
{{ scope.row.date | formatDate }}
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="color" label="颜色">
<template slot-scope="scope">
<!-- 使用 formatter 属性设置颜色 -->
<span :style="{ color: scope.row.color }">{{ scope.row.color }}</span>
</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们使用了 Vue 的过滤器(filter)来对时间进行格式化。具体的实现方法可以参考下面的代码:
```js
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('YYYY-MM-DD HH:mm:ss')
}
})
```
此外,我们还使用了 `<span>` 标签来设置文字的颜色。通过 `:style` 绑定一个对象,可以动态设置文字的颜色。上面的代码中,我们使用了 `scope.row.color` 来获取 data 中的颜色值,然后将其设置为文字颜色。
希望这个示例代码可以帮到你!
阅读全文