newcpms/ui/src/views/dashboard/ByPassChart.vue

<template>
  <div>
    <el-table
      :data="tableData2"
      style="width:11.25rem"
      :row-class-name="tableRowClassName"
      :header-cell-style="headerCellStyle">
      <el-table-column
        prop="tagNo"
        :label="$t('位号')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        :label="$t('类型')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="byPassTime"
        :label="$t('旁路时间')">
      </el-table-column>
      <el-table-column
        prop="isTimeOut"
        :label="$t('是否超时')"
        width="80">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ByPassChart",
  methods: {
    tableRowClassName({row, rowIndex}) {
      if(rowIndex % 2 === 0){
        return 'warning-row';
      } else {
        return 'success-row';
      }
      return '';
    },
    headerCellStyle({ row, rowIndex }) {
      return 'background-color: #0f1325;color: #FFFFFF;border: none'
    }
  },
  data() {
    return {
      tableData2: [{
        tagNo: '320FC2222',
        type: '类型',
        byPassTime: '2016-05-03',
        isTimeOut: '是'
      }, {
        tagNo: '320FC2222',
        type: '类型',
        byPassTime: '2016-05-03',
        isTimeOut: '是'
      }, {
        tagNo: '320FC2222',
        type: '类型',
        byPassTime: '2016-05-03',
        isTimeOut: '是'
      }, {
        tagNo: '320FC2222',
        type: '类型',
        byPassTime: '2016-05-03',
        isTimeOut: '是'
      }]
    }
  }
}
</script>

<style scoped>
  /deep/.el-table .warning-row {
    background: #171c33;
  }

  /deep/.el-table .success-row {
    background: #0f1325;
  }

  .el-table {
    background-color: #0f1325;
    text-align: center;
    color: #FFFFFF;
  }

  /deep/.el-table__row>td{
    border: none;
  }

  .el-table::before {
    height: 0px;
  }
</style>