el-table-column中某个单元的值由该行其他单元格的值决定

这段代码展示了如何在Vue.js的表格组件中,根据当前行的入库日期与当前日期比较,动态生成状态显示。如果入库日期超过3个月或6个月,会显示不同的状态文本,并用不同颜色区分。方法包括`colorStatusFormat`和`colorFormat`用于计算状态和颜色,而`getThreeStartDate`和`getSixStartDate`则用于获取3个月和6个月前的日期。
摘要由CSDN通过智能技术生成

 上面的数据在状态中,该单元格的数据不是从后台获取的,而是通过判断当前行中入库日期与当天时间进行对比得出,判断入库日期与当前日期的差值超过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>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值