vue 使用Element实现表格行样式设置

需求：表格中的某些行根据时间判断是否已过时，过时则将整行设为红色

实现：

<el-table 
        row-key="meeting_id"
        border
        ref="multipleTable"
        header-cell-class-name="table-header"
        highlight-current-row
        :stripe="false"
        @row-click="handleCurrentChange"
        :row-class-name="tableRowClassName "
      >
      
       tableRowClassName ( {row,rowIndex}) {
        if (new Date(row.start_time) < new Date()) {
          return 'danger-row'
        }
        else return ''
      }
      
      <style>
      .el-table .danger-row {
          background: #FFDCDC;
        }
      </style>
   

效果：

讲解：

1. table加上
   :row-class-name="tableRowClassName "

2. 写tableRowClassName方法

3. 往style中加入方法中返回的样式名称的样式，比如我这里方法返回的是 ‘danger-row’

element官网中还有其他状态的区分，自行查看：

踩坑小计：样式实现出来后，发现只有满足条件的第一行有效果，百度得知，是table中 stripe属性要设置成false