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

<template>
  <div>
    <el-table
      :data="tableData2"
      style="width:11.25rem"
      :row-class-name="tableRowClassName"
      :header-cell-style="headerCellStyle">
      <el-table-column
        prop="num"
        :label="$t('序号')"
        width="80">
      </el-table-column>
      <el-table-column
        prop="tagNo"
        :label="$t('位号')"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        :label="$t('描述')"
        width="300">
      </el-table-column>
      <el-table-column
        prop="byPassTime"
        :label="$t('人工日期')">
      </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: [{
        num: '1',
        tagNo: '310FC1111A.MODE',
        type: '310-H-110 1 HC FEED',
        byPassTime: '24.00',
      }, {
        num: '2',
        tagNo: '310FC1121A.MODE',
        type: '310-H-110 2 HC FEED',
        byPassTime: '24.00',
      }, {
        num: '3',
        tagNo: '310FC1341B.MODE',
        type: '310-H-111 BFW IN',
        byPassTime: '24.00',
      }, {
        num: '4',
        tagNo: '310FC1353B.MODE',
        type: '310-H-111 RAD CELL A',
        byPassTime: '24.00',
      }]
    }
  }
}
</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>