element-ui的table表格隔行换色

原创

JackieDYH 2020-09-08 09:21:00 博主文章分类：Vue ©著作权

文章标签 javascript html elementUI 表格颜色背景背景色 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者JackieDYH的原创作品，请联系作者获取转载授权，否则将追究法律责任

<el-table
       :data="tableData"
      :header-cell-style="tableHeaderColor"//头部变色
      style="width: 100%" :row-class-name="tableRowClassName"//隔行换色
      >
      <el-table-column
        align='center'
        label="日期" width="60">
        <el-table-column prop="date" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="产品型号" width="80">
        <el-table-column prop="ProductModel" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋链速" width="120" align='center'>
        <el-table-column
          prop="spray.spraySet"
          align='center'
          label="设定" width="60">
        </el-table-column>
        <el-table-column
          prop="spray.sprayCur"
          align='center'
          label="实际" width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋风刀频率"  width="120" align='center'>
        <el-table-column
          prop="rate.rateSet"
          align='center'
          label="设定" width="60">
        </el-table-column>
        <el-table-column
          prop="rate.rateCur"
          align='center'
          label="实际" width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="氧气浓度">
        <el-table-column  prop="O2" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column
        align='center'
        label="氮气浓度" >
        <el-table-column prop="N2" align='center'>
        </el-table-column>
      </el-table-column>
      <el-table-column label="干燥炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Dry.Dryone.DryoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Dryone.DryoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Dry.Drytwo.DrytwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Drytwo.DrytwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Dry.Drythree.DrythreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Dry.Drythree.DrythreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="预热炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hotone.HotoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hotone.HotoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hottwo.HottwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hottwo.HottwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Hot.Hotthree.HotthreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Hot.Hotthree.HotthreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="钎焊炉" width="300" align='center'>
        <el-table-column label="1区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingone.BrazingoneSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingone.BrazingoneCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingtwo.BrazingtwoSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingtwo.BrazingtwoCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="Brazing.Brazingthree.BrazingthreeSet"
            align='center'
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="Brazing.Brazingthree.BrazingthreeCur"
            align='center'
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

  methods:{
             tableRowClassName({row, rowIndex}) {
          if(rowIndex%2==1){
            return 'warning-row';
          }else{
            return 'success-row';
          }
        },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #ebf1fb;color: #496fec;font-weight:600;font-size:16px;text-align:center'
      }else if(rowIndex === 1){
        return 'background-color: #f7faff;font-size:14px;text-align:center'
      }else if(rowIndex === 2){
        return 'background-color: #f7faff;font-size:14px;text-align:center'
      }
    },
}
  <style>
  .el-table .warning-row {
    background: #f7faff;
  }
  .el-table .success-row {
    background: #ebf1fb;
  }
</style>复制代码

修改背景色

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%;height:78%"
    :cell-style="{background:'#003B51',color:'#fff','text-align': 'center',padding: '.1rem 0'}"
    :header-cell-style="{background:'#00BAFF',color:'#fff','text-align': 'center',padding: '.06rem 0'}"
  >
    <!-- :cell-style="cellStyle" -->
    <el-table-column prop="equipName" :label="tabName[0]"></el-table-column>
    <el-table-column prop="equipPosition" :label="tabName[1]"></el-table-column>
    <el-table-column prop="batteryLevelEvent" :label="tabName[2]" width="56"></el-table-column>
    <el-table-column prop="status" :label="tabName[3]" width="56"></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ["tableData"],
  data() {
    return {
      tabName: ["设备名称", "地址", "状态", "在线"]
    };
  },
  methods: {
    // cellStyle(row, column, rowIndex, columnIndex) {
    //根据报警级别显示颜色
    // console.log(row);
    // console.log(row.column);
    // switch(true){
    //   case row.column.label === "告警级别" && row.row.eventDesc === "蹲底报警" :
    //     return "color:red";
    //     break;
    //   case row.column.label === "告警级别" && row.row.eventDesc === "遮挡门报警" :
    //     return "color:blue";
    //     break;
    //   default :
    //     return "{background:'#003B51',color:'#fff','text-align': 'center',padding: '.11rem 0'}";
    //     break;
    // }
    // if ( row.column.label === "告警级别" && row.row.eventDesc === "蹲底报警" ) {
    //   return "color:red";
    // } else if ( row.column.label === "告警级别" && row.row.eventDesc === "遮挡门报警" ) {
    //   return "color:yellow";
    // }
    // }
  }
};
</script>

<style lang="less" scoped>

</style>