element组件row-class-name属性

Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

 例：距离有效期30天显示黄色，超过有效期显示红色（table中的表格）

二、使用步骤

1.表明属性

代码如下（示例）：

 <el-table
        :data="tableData"
        height="calc(100vh - 300px)"
        :border="true"
        :fit="true"
        :key="tabindex"
        :row-class-name="tableRowClassName"
      >

 2.methods方法

    // 下次复审日期到期前30日，黄色提示，超期红色预警。
    tableRowClassName(row) {
      let yy = new Date().getFullYear();// 获取当前年
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let date = yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + dd;
      console.log(
        this.difference(date, row.row.XCFSRQ),
        "下次复审日期-当前日期"
      );
      if (
        this.difference(date, row.row.XCFSRQ) < 30 &&
        this.difference(date, row.row.XCFSRQ) > 0
      ) {
        return "warning-row";
      } else if (this.difference(date, row.row.XCFSRQ) < 0) {
        return "success-row";
      } else {
        return "suc-row";
      }
    }

3.样式绑定

 .el-table .warning-row {
  background: yellow !important;
}

 .el-table .success-row {
  background: red !important;
}
 .el-table .suc-row {
  background: white !important;
}

 4.时间差计算

    // 时间差计算
    difference: function (beginTime, endTime) {
      let dateBegin = new Date(beginTime);
      let dateEnd = new Date(endTime);
      let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
      return Math.floor(dateDiff / (24 * 3600 * 1000));
    },

总结