最近遇到了需求是这样的，一个数据列表中表单数据可能处于报警状态这个时候需要将它的颜色标红，由于每个指标的报警状态条件不尽相同所以这部分的逻辑就交由后端处理了。

 跟后端商议后数据结构如下：

tableData: [
        {
          date: { value: "2016-05-02", state: 1 },
          name: { value: "王小虎", state: 0 },
          address: { value: "上海市普陀区金沙江路 1517 弄", state: 1 },
        },
        {
          name: { value: "王er虎", state: 0 },
          date: { value: "2016-05-03", state: 0 },
          address: { value: "上海区金沙江路 15市普陀17 弄", state: 1 },
        },
        {
          name: { value: "王er虎", state: 0 },
          date: { value: "2016-05-03", state: 0 },
          address: { value: "上海区金沙江路 15市普陀17 弄", state: 1 },
        },
      ],

html：

 <el-table
        :data="tableData"
        border
        :cell-class-name="cellStyle"
      >
        <el-table-column prop="date.value" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name.value" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address.value" label="地址"> </el-table-column>
      </el-table>

js：

    cellStyle({ row, column, rowIndex, columnIndex }) {
      let warningColor = false;
      //   console.log(row, column, rowIndex, columnIndex);
      // console.log(row,"row");
      Object.keys(row).forEach((key, index) => {
        //遍历每行中每个数据的state
        if (row[key].state == 1) {
          //定位该数据的坐标
          if (rowIndex === rowIndex && columnIndex === index) {
            warningColor = true;
          }
        }
      });

      if (warningColor) {
        // red为想变成的单元格样式
        return "success-row";
      }
      return "";
    },
// .el-table .success-row {
//   background: red;
// }

在开发项目时代码放上去发现变红的位置不对，几经修改后得到了如下代码：

 <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-class-name="cellStyle"
      >
        <el-table-column prop="date" label="日期" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.date.value }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <!-- 假装这里有很多操作 -->
            <span v-if="scope.row.name">{{ scope.row.name.value }}是我</span>
            <span v-else>{{ scope.row.name.value }}是你</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <template slot-scope="scope">
            <span>{{ scope.row.address.value }}</span>
          </template>
        </el-table-column>
      </el-table>

cellStyle({ row, column, rowIndex, columnIndex }) {
      let warningColor = false;
      let alarmingColor = false;
      Object.keys(row).forEach((key) => {
        // column.property为每项绑定的prop,
        // 与之前的prop="address.value"不同，prop="address"方便key与prop对应
        // console.log(key,column,column.property);
        if (row[key].state == 1 && key == column.property) {
          if (rowIndex === rowIndex && columnIndex === columnIndex) {
            warningColor = true;
          }
        } else if (row[key].state == 2 && key == column.property) {
          if (rowIndex === rowIndex && columnIndex === columnIndex) {
            alarmingColor = true;
          }
        }
      });
      if (warningColor) {
        return "success-row";
      }
      //多加一个颜色的需求再正常不过了
      if (alarmingColor) {
        return "alarm-row";
      }
      return "";
    },

最终效果图：