背景

表格每行数据超出区间时，标红显示

使用

<a-table
            :columns="columns"
            :data-source="indexReport"
            :pagination="false"
            rowKey="indexId"
            :rowClassName="rowClassName"
          >
            <div slot="empty" slot-scope="text">{{ text || '_' }}</div>
            <div slot="indexValue" slot-scope="text, record">
              {{ text }}
              <a-icon v-if="text < record.referenceVDown" type="arrow-down" :style="{ color: '#58bc58' }" />
              <a-icon v-if="text > record.referenceVUp" type="arrow-up" :style="{ color: '#f00' }" />
            </div>
            <div slot="referenceVDown" slot-scope="text, record">
              {{ record.referenceVDown || '0' }} ~ {{ record.referenceVUp || '0' }}
            </div>
            <a slot="riskRank" slot-scope="text">
              <RiskTxt :status="text" />
            </a>
            <div slot="effectHostNum" slot-scope="text">{{ text }}台</div>
          </a-table>


    rowClassName(record, index) {
      return record.indexValue > record.referenceVUp || record.indexValue < record.referenceVDown ? 'tableRowBg' : ''
    }

问题及修复

样式未生效

查看源码，该类名已经添加到相应的表格行上， 但是，实际styles并没有相应的样式

解决方案

删除scoped

此方案缺点：scoped去除后，添加了全局样式类row，易造成全局数据污染;

样式穿透

此时，实际styles也出现相应的样式;

  /deep/ .tableRowBg {
    background-color: #ffc0cb;
  }