自定义element-ui的table字体颜色，及背景色

遇到一个需要根据报警级别来区分table数据的需求，一开始的想法是改变字体颜色，看了下ele文档，有个cell-style的属性，可以通过回调，返回样式。感觉so easy

那就来吧，直接上代码

界面部分

<template>
  <div class="app-container">
    <div class="filter-container" >
      <el-button class="filter-item" type="success"  >全部处理</el-button>
    </div>
    <el-table :data="tableData" tooltip-effect="dark"  @selection-change="handleSelectionChange"  :cell-style="cellStyle" border fit highlight-current-row>
      <el-table-column  type="selection" width="55" :selectable="isDisabled"></el-table-column>
      <el-table-column label="确认" align="center" width="80">
        <template slot-scope="scope">
          <el-button  type="success" size="mini" :disabled="scope.row.confirm" @click="confirmHandle(scope.row.pointId)"> {
   
   {scope.row.confirm?'已确认':'确认'}}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center" width="80">
        <template slot-scope="scope">
          <el-button  type="primary" size="mini" >详情</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="alarmLevel" label="告警级别" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="area" label="区域" align="center"></el-table-column>
      <el-table-column prop="equip" label="设备" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="pointName" label="测点" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="limit" label="限值" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="alarmValue" label="报警值" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="alarmTime" label="报警时间" align="center" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

js部分

<script>
  export default {
    data() {
      return {//初始数据变量
        tableData: [{
          confirm:true,
          alarmLevel:"紧急告警",
          area:"北京市昌平区",
          equip:"昌平气象采集",
          pointId:1,
          pointName:"温度",
          limit:"35",
          alarmValue:"41",
          alarmTime:"2019-6-1 12:00:00",
        },{
          confirm:false,
          alarmLevel:"一般告警",
          area:"北京市朝阳区",
          equip:"昌平光感采集",
          pointId:2,
          pointName:"紫外线",
          limit:"60",
          alarmValue:"61",
          alarmTime:"2019-6-1 12:00:00",
        },
          {
            confirm:false,
            alarmLevel:"紧急告警",
            area:"北京市朝阳区",
            equip:"昌平光感采集",
            pointId:3,
            pointName:"紫外线",
            limit:"60",
            alarmValue:"61",
            alarmTime:"2019-6-1 12:00:00",
          }],
        multipleSelection: []
      }
    },
    methods: {
      handleSelectionChange(val) {//复选框选中操作
        console.log(val);
      },
      cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
        // console.log(row);
        // console.log(row.column);
        if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
          return 'color:red'
        }else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
          return 'color:yellow'
        }
      }
    }
  }
</script>

完成后的界面是这样婶的，感觉完全ok

后来一看字体不太清楚啊，加上颜色，盯了几秒，感觉近视又加深了啊，哈，那就换个思路，我就想试着让一行数据变背景色，只需要修改cellstyle方法中的if判断就可以了

cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
        // console.log(row);
        // console.log(row.column);
        if(row.row.alarmLevel==="紧急告警"){
          return 'background:red'
        }else if(row.row.alarmLevel==="一般告警" ){
          return 'background:yellow'
        }
      }

修改后的界面是这样婶的，没错，你没看错就这么高调，我要被亮瞎了

行吧，为了不被打死，那就缩小范围，只高亮报警级别这一项，继续修改if

     

 cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
        // console.log(row);
        // console.log(row.column);
        if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
          return 'background:red'
        }else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
          return 'background:yellow'
        }
      }

完事，是这样婶的

嗯，不愧是我写的页面，一如既往地亮眼，没有ui果然是件很蛋疼的事啊，至此功能最起码实现了
小弟刚学vue+ele，有问题的地方欢迎大佬们随时指正，告辞