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>