element table基數行和偶數行做計算，改變不同閾值的文本顏色

效果圖：

 

實現步驟：

       1.第一個v-if：Accuracy、Coverage、Hit Rate三個模塊與 Positive Gap、Negative Gap的計算方法不同

       2.第二個v-if：

          1>根據表格行的index下標做判斷，將奇數行的數值置爲灰色並添加百分號，添加一個em標籤判斷值爲‘/’，‘ ’，‘NA’時，則不添加百分號

         2>v-else重點在於根據與奇數行作比較，改變偶數行對應閾值範圍的顏色

代碼如下：

1>父組件代碼

<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
>
  <el-table-column
    label="Product"
    prop="product">
  </el-table-column>
  <el-table-column
     label="Category">
    <el-table-column
       label="Usage\Price"
       prop="priceUsage">
    </el-table-column>
  </el-table-column>
  <el-table-column  label="Accuracy">
    <el-table-column
      prop="accuracyH"
       label="H">
      <template slot-scope="scope">
        <commontitle :labName="'Accuracy'" :scopeType="'accuracyH'" :scopeIndex="scope.$index" :scopeRow="scope.row.accuracyH" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="accuracyM"
       label="M">
      <template slot-scope="scope">
        <commontitle :labName="'Accuracy'" :scopeType="'accuracyM'" :scopeIndex="scope.$index" :scopeRow="scope.row.accuracyM" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="accuracyL"
       label="L">
      <template slot-scope="scope">
        <commontitle :labName="'Accuracy'" :scopeType="'accuracyL'" :scopeIndex="scope.$index" :scopeRow="scope.row.accuracyL" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
  </el-table-column>
  <el-table-column  label="Positive Gap">
    <el-table-column
      prop="positiveGapH"
       label="H">
      <template slot-scope="scope">
        <commontitle :labName="'Positive Gap'" :scopeType="'positiveGapH'" :scopeIndex="scope.$index" :scopeRow="scope.row.positiveGapH" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="positiveGapM"
       label="M">
      <template slot-scope="scope">
        <commontitle :labName="'Positive Gap'" :scopeType="'positiveGapM'" :scopeIndex="scope.$index" :scopeRow="scope.row.positiveGapM" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="positiveGapL"
       label="L">
      <template slot-scope="scope">
        <commontitle :labName="'Positive Gap'" :scopeType="'positiveGapL'" :scopeIndex="scope.$index" :scopeRow="scope.row.positiveGapL" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
  </el-table-column>
  <el-table-column  label="Negative Gap">
    <el-table-column
      prop="negativeGapH"
       label="H">
      <template slot-scope="scope">
        <commontitle :labName="'Negative Gap'" :scopeType="'negativeGapH'" :scopeIndex="scope.$index" :scopeRow="scope.row.negativeGapH" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="negativeGapM"
       label="M">
      <template slot-scope="scope">
        <commontitle :labName="'Negative Gap'" :scopeType="'negativeGapM'" :scopeIndex="scope.$index" :scopeRow="scope.row.negativeGapM" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="negativeGapL"
       label="L">
      <template slot-scope="scope">
        <commontitle :labName="'Negative Gap'" :scopeType="'negativeGapL'" :scopeIndex="scope.$index" :scopeRow="scope.row.negativeGapL" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
  </el-table-column>
  <el-table-column  label="Coverage">
    <el-table-column
      prop="coverageH"
       label="H">
      <template slot-scope="scope">
        <commontitle :labName="'Coverage'" :scopeType="'coverageH'" :scopeIndex="scope.$index" :scopeRow="scope.row.coverageH" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="coverageM"
       label="M">
      <template slot-scope="scope">
        <commontitle :labName="'Coverage'" :scopeType="'coverageM'" :scopeIndex="scope.$index" :scopeRow="scope.row.coverageM" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="coverageL"
       label="L">
      <template slot-scope="scope">
        <commontitle :labName="'Coverage'" :scopeType="'coverageL'" :scopeIndex="scope.$index" :scopeRow="scope.row.coverageL" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
  </el-table-column>
  <el-table-column  label="Hit Rate">
    <el-table-column
      prop="hitRateH"
       label="H">
      <template slot-scope="scope">
        <commontitle :labName="'Hit Rate'" :scopeType="'hitRateH'" :scopeIndex="scope.$index" :scopeRow="scope.row.hitRateH" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="hitRateM"
       label="M">
      <template slot-scope="scope">
        <commontitle :labName="'Hit Rate'" :scopeType="'hitRateM'" :scopeIndex="scope.$index" :scopeRow="scope.row.hitRateM" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
    <el-table-column
      prop="hitRateL"
       label="L">
      <template slot-scope="scope">
        <commontitle :labName="'Hit Rate'" :scopeType="'hitRateL'" :scopeIndex="scope.$index" :scopeRow="scope.row.hitRateL" :scopeData="tableData"></commontitle>
      </template>
    </el-table-column>
  </el-table-column>
</el-table>

2>子組件代碼

<div>
    <div v-if="labName=='Accuracy'||labName=='Coverage'||labName=='Hit Rate'">
      <span v-if="scopeIndex%2==0" class="grayfont">
        {{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em>
      </span>
      <span v-else>
        <span v-if="scopeData[scopeIndex-1][scopeType]=='/'||scopeRow=='--'" style="color:#000">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
        <span v-else>
          <span v-if="parseFloat(scopeRow)>=parseFloat(scopeData[scopeIndex-1][scopeType])" style="color:rgb(14, 117, 59)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
          <span v-else-if="parseFloat(scopeRow)>=50&&parseFloat(scopeRow)<parseFloat(scopeData[scopeIndex-1][scopeType])" style="color:rgb(242, 159, 5)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
          <span v-else-if="parseFloat(scopeRow)<50" style="color:rgb(242, 5, 5)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
        </span>
      </span>
    </div>
    <div v-else-if="labName=='Positive Gap'||labName=='Negative Gap'">
        <span v-if="scopeIndex%2==0" class="grayfont">
          {{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em>
        </span>
        <span v-else>
          <span v-if="scopeRow=='--'||scopeData[scopeIndex-1][scopeType]=='/'" style="color:#000">
            {{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em>
          </span>
          <span v-else>
            <span v-if="parseFloat(scopeRow)<=parseFloat(scopeData[scopeIndex-1][scopeType])" style="color:rgb(14, 117, 59)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
            <span v-else-if="parseFloat(scopeRow)<=20&&parseFloat(scopeRow)>parseFloat(scopeData[scopeIndex-1][scopeType])" style="color:rgb(242, 159, 5)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
            <span v-else-if="parseFloat(scopeRow)>20" style="color:rgb(242, 5, 5)">{{scopeRow}}<em v-if="scopeRow!=''&&scopeRow!='NA'&&scopeRow!='--'&&scopeRow!='/'">%</em></span>
          </span>
        </span>
    </div>
  </div>