派生自 wuyushui/SewerAndRainNetwork

XingChuan
2021-05-30 ca2a7113f660f523518c4be431534e7eebaa297e
src/components/table/components/AirQuality.vue
@@ -1,55 +1,23 @@
<template>
    <div class="AirQuality">
        <el-table
                class="tableBox"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="rowClass"
                border
        >
            <el-table-column
                    width="30px"
                    label=""
            >
        <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
            <el-table-column width="30px" label="">
                <template>
                    <i class="el-icon-caret-right"></i>
                    <span style="margin-left: 10px"></span>
                </template>
            </el-table-column>
            <el-table-column
                    label="序号"
                    width="60px"
                    type="index">
            </el-table-column>
            <el-table-column
                    prop="UserName"
                    label="企业名称"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="AQI"
                    label="AQI"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="MajorPollutant"
                    label="首要污染物 "
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="AirQualityCategory"
                    label="空气质量类别"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="RegionalColor"
                    label="区域颜色"
                    width="200px">
              <template slot-scope="scope">
                <div v-if="scope.row.RegionalColor==='四级红色'" style="background-color: red">{{scope.row.RegionalColor}}</div>
                <div v-else-if="scope.row.RegionalColor==='三级橙色'" style="background-color: orange">{{scope.row.RegionalColor}}</div>
                <div v-else style="background-color: green">{{scope.row.RegionalColor}}</div>
              </template>
            <el-table-column label="序号" width="60px" type="index"></el-table-column>
            <el-table-column prop="UserName" label="企业名称"></el-table-column>
            <el-table-column prop="AQI" label="AQI"></el-table-column>
            <el-table-column prop="MajorPollutant" label="首要污染物 "></el-table-column>
            <el-table-column prop="AirQualityCategory" label="空气质量类别"></el-table-column>
            <el-table-column prop="RegionalColor" label="区域颜色">
                  <template slot-scope="scope">
                        <div v-if="scope.row.RegionalColor==='四级红色'" style="background-color: red">{{scope.row.RegionalColor}}</div>
                        <div v-else-if="scope.row.RegionalColor==='三级橙色'" style="background-color: orange">{{scope.row.RegionalColor}}</div>
                        <div v-else style="background-color: green">{{scope.row.RegionalColor}}</div>
                  </template>
            </el-table-column>
        </el-table>
    </div>
@@ -89,11 +57,11 @@
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
      // return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}