el-table表格变更前后根据数据值改变背景颜色

需求：

1.左侧变更前表格数据不可以编辑，并且背景色加灰

2.右侧变更后表格数据可被编辑，编辑后变更前与变更后行数据不一致，添加背景色区分

3.点击删除的时候，给变更后表格当前行，添加背景色和删除的中横线

    
          
            
              
                
              
            
          
          
            
              
                
                {{ scope.row[item.prop] }}
              
            
          
          
            
            
              
                
                {{ scope.row[item.prop] }}
              
            
          
        

数据值：

data() {
    return {
tableDataList:[],
//isEdit单元格控制是否可编辑
       viewColumns: [
        { prop: 'topSymptomBefore', width: '120', align: 'center', label: '事项', fixed: false, isEdit: false },
        { prop: 'controlItemBefore', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: false },
        { prop: 'controlStandardBefore', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: false },
        { prop: 'remarkBefore', width: '120', align: 'center', label: '备注', fixed: false, isEdit: false}
      ],
      // idAfter是当前数据的id,新增的时候 这个数据是
      viewColumnsTwo: [
        { prop: 'topSymptomAfter', width: '120', align: 'center', label: '事项', fixed: false, isEdit: true },
        { prop: 'controlItemAfter', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: true },
        { prop: 'controlStandardAfter', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: true },
        { prop: 'remarkAfter', width: '120', align: 'center', label: '备注', fixed: false, isEdit: true }
      ], 
    }
}

添加背景色处理:

 tableCellClassName({ row, column, columnIndex }) {
      // 把每一列的索引放到column里
      column.index = columnIndex
      if (row.colorFlag) {
        if ((column.property == 'topSymptomAfter' || column.property == 'controlItemAfter' || column.property == 'controlStandardAfter' || column.property == 'remarkAfter')) {
          return 'warning-row' // 返回被点击行的样式
        }
      }
      if (column.property == 'topSymptomBefore' || column.property == 'controlItemBefore' || column.property == 'controlStandardBefore' || column.property == 'remarkBefore') {
        return 'success-row' // 返回被点击行的样式
      }
      // 对比后的数据 不等于 对比前的数据,那么添加背景色
      if (column.property == 'topSymptomAfter' && (row.topSymptomAfter.toString() !== row.topSymptomBefore.toString())) {
        return 'fill-row'
      }
      if (column.property == 'controlItemAfter' && (row.controlItemAfter.toString() !== row.controlItemBefore.toString())) {
        return 'fill-row'
      }
      if (column.property == 'controlStandardAfter' && (row.controlStandardAfter.toString() !== row.controlStandardBefore.toString())) {
        return 'fill-row'
      }
      if (column.property == 'remarkAfter' && (row.remarkAfter.toString() !== row.remarkBefore.toString())) {
        return 'fill-row'
      }
      return '' // 返回其他行的默认样式
    },
//删除行
 handleDel(row) {
      this.handleIdentification(row)
      // this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)
      if (!(row.topSymptomBefore && row.controlItemBefore && row.controlStandardBefore && row.remarkBefore)) {
        row.colorFlag = false
        // 如果左侧没有数据值，只有右侧有数据值，点击删除 是删除整条数据
        this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)
      }
      if ((row.topSymptomAfter || row.controlItemAfter || row.controlStandardAfter || row.remarkAfter)) {
        row.colorFlag = true
        updateMqs(this.addForm).then(res => {
          this.$message.success(res.msg)
        }).catch(res => {
          this.$message.error(res.msg)
        })
      }
    },

::v-deep .el-table .warning-row{
   text-decoration: line-through;
   background-color: #f0f9eb;
   color: red
}
::v-deep .el-table  .success-row {
   background-color: #F0F0F0;
 }
::v-deep .el-table .fill-row{
  background-color: #F5F108;
}

成果：