设置el-table-column中的时间格式并与当前时间比较,小于10天则将字体设置为红色
时间: 2024-02-23 16:02:33 浏览: 73
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
好的,下面是设置 el-table-column 中时间格式并与当前时间比较,小于10天则将字体设置为红色的代码示例:
```html
<el-table :data="tableData">
<el-table-column prop="date" label="日期">
<template slot-scope="scope">
<!-- 使用 formatter 属性设置时间格式,并与当前时间比较 -->
<span :class="{ 'is-red': isLessThan10Days(scope.row.date) }">
{{ scope.row.date | formatDate }}
</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
在上面的代码中,我们使用了 Vue 的计算属性(computed)来计算当前时间与表格中时间的差值。具体的实现方法可以参考下面的代码:
```js
computed: {
currentDate() {
return new Date()
}
},
methods: {
isLessThan10Days(date) {
const diff = moment(date).diff(this.currentDate, 'days')
return diff < 10
}
}
```
同时,我们也使用了一个 CSS 类 `.is-red` 来设置文字颜色为红色。上面的代码中,我们使用了 `:class` 绑定一个对象,可以动态设置 CSS 类。如果 `isLessThan10Days` 方法返回 `true`,则添加 `.is-red` 类。
最后,我们还需要修改一下之前的时间过滤器,加入时分秒的格式化:
```js
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('YYYY-MM-DD HH:mm:ss')
}
})
```
希望这个示例代码可以帮到你!
阅读全文