上面的数据在状态中,该单元格的数据不是从后台获取的,而是通过判断当前行中入库日期与当天时间进行对比得出,判断入库日期与当前日期的差值超过3个月就显示超过3个月,入库日期与当前日期的差值超过6个月就显示超过6个月,并且显示颜色还不同
<el-table-column label="状态" header-align="left" align="left" prop="colorStatus" width="140" fixed="right">
<template slot-scope="scope">
<span :class="colorFormat(scope.row)"> {
{ colorStatusFormat(scope.row) }}</span>
</template>
</el-table-column>
methods: {
colorStatusFormat(row) {
if (row.warehousingDate > this.getThreeStartDate()) {
return ''
} else if (row.warehousingDate < this.getThreeStartDate() && row.warehousingDate > this.getSixStartDate()) {
return '超过3个月'
} else {
return '超过6个月'
}
},
colorFormat(row) {
if (row.warehousingDate > this.getThreeStartDate()) {
return ''
} else if (row.warehousingDate < this.getThreeStartDate() && row.warehousingDate > this.getSixStartDate()) {
return 'color1'
} else {
return 'color2'
}
},
getThreeStartDate() {
var newDate = new Date()
var startY = newDate.getFullYear()
var startM = newDate.getMonth() - 3
var startD = newDate.getDate()
// 日期賦值
var mydate = new Date(startY, startM, startD)
var strYear = mydate.getFullYear()
//顯示的月份要加一,因為月份是從0開始的
var strMonth = mydate.getMonth() + 1
var strDate = mydate.getDate()
if (strMonth.toString().length === 1)
strMonth = '0' + strMonth
if (strDate.toString().length === 1)
strDate = '0' + strDate
var strStartDate = strYear + '/' + strMonth + '/' + strDate
return strStartDate
},
getSixStartDate() {
var newDate = new Date()
var startY = newDate.getFullYear()
var startM = newDate.getMonth() - 6
var startD = newDate.getDate()
// 日期賦值
var mydate = new Date(startY, startM, startD)
var strYear = mydate.getFullYear()
//顯示的月份要加一,因為月份是從0開始的
var strMonth = mydate.getMonth() + 1
var strDate = mydate.getDate()
if (strMonth.toString().length === 1)
strMonth = '0' + strMonth
if (strDate.toString().length === 1)
strDate = '0' + strDate
var strStartDate = strYear + '/' + strMonth + '/' + strDate
return strStartDate
}
}
}
</script>
<style lang="scss">
.color1{
color: #FFA500
}
.color2{
color: #ff5722
}
</style>