table表格中某条数据不符合条件该条数据背景颜色变灰的写法

业务背景：点击table表中的某条数据，调用接口，判断缴费截止日期是否在今天之后，在今天之前的，给出提示，并且该条数据的背景颜色便会
该项目所用到的是vue+element

1、首先在table的表头中绑定 :cell-class-name=“tableRowClassName” 这是element中table表的className回调方法

2、定义两个背景颜色
一个是 warning-row { backgrobaund: #778899 !important } //灰色背景
一个是 success-row { backgrobaund: white !important } //白色背景

3、定义 demandValidFlag = flase ， checkList = [ ]

4、判断不合符条件的，demandValidFlag = true,然后给出提示：缴费截止日期必须在当前后期之后，然后把该条数据的唯一标识加入到checkList 数组中。比如 ：this.checkList.push(id)

5、开始书写表头绑定的className回调方法了

tableRowClassName ( {row} ) {
   //this.iSlist是选中的数据，将选中数据的id加入到list数组中
   const list = this.iSlist.map(item => item.id)
   // 判断不符合条件的情况
   if (this.demandValidFlag  = true) {
      if (this.checkList.includes(row.id) {
         for (let i =0 ;i < this.checkList.length; i++) {
            if (list.includes(this.checkList[i])) {
               return 'warning-row'
             }
           }
         } else {
             return 'success-row'
           }
       } else {
            return 'success-row'
          }
    }

这样，该条数据如果不符合条件的话，会弹出提示，并且背景颜色变灰；选择一条或多条数据此方法皆可
当该条数据背景颜色变灰，你不勾选该条数据，该条数据的背景颜色会变回白色