Element UI表格中根据数值动态设置字体颜色

左手吻左脸。2025-10-10 23:48

我们有一个温度监控系统，需要展示温度偏差值：

正偏差值（高于标准温度）显示为红色
负偏差值（低于标准温度）显示为蓝色
零或空值显示为默认颜色

一、动态Class绑定

html 复制代码

<el-table-column sortable="custom" prop="deviationValue" label="偏差值(℃)" width="75">
  <template #default="scope">
    <div 
      class="openParamsClass over-emplis" 
      :class="getDeviationClass(scope.row.deviationValue)"
      @click="chartOpen(scope.row.id, 'deviationValue', '偏差值')" 
      :title="scope.row.deviationValue"
    >
      {{ scope.row.deviationValue != null ? scope.row.deviationValue : '-' }}
    </div>
  </template>
</el-table-column>

css

css 复制代码

.deviation-positive {
  color: #ff4d4f;
  font-weight: 500;
}

.deviation-negative {
  color: #1890ff;
  font-weight: 500;
}

.deviation-zero {
  color: #606266;
}

二、动态Style绑定

html 复制代码

<el-table-column sortable="custom" prop="deviationValue" label="偏差值(℃)" width="75">
  <template #default="scope">
    <div 
      class="openParamsClass over-emplis" 
      :style="getDeviationStyle(scope.row.deviationValue)"
      @click="chartOpen(scope.row.id, 'deviationValue', '偏差值')" 
      :title="scope.row.deviationValue"
    >
      {{ scope.row.deviationValue != null ? scope.row.deviationValue : '-' }}
    </div>
  </template>
</el-table-column>

方法：

javascript 复制代码

methods: {
  getDeviationStyle(value) {
    if (value === null || value === undefined || value === '-') {
      return { color: '#606266' };
    }
    
    const numValue = Number(value);
    if (numValue > 0) {
      return { color: '#ff4d4f', fontWeight: '500' };
    } else if (numValue < 0) {
      return { color: '#1890ff', fontWeight: '500' };
    } else {
      return { color: '#606266' };
    }
  }
}

三、模板内联判断

html 复制代码

<el-table-column sortable="custom" prop="deviationValue" label="偏差值(℃)" width="75">
  <template #default="scope">
    <div 
      class="openParamsClass over-emplis" 
      :style="{
        color: scope.row.deviationValue > 0 ? '#ff4d4f' : 
               scope.row.deviationValue < 0 ? '#1890ff' : '#606266',
        fontWeight: scope.row.deviationValue !== 0 ? '500' : 'normal'
      }"
      @click="chartOpen(scope.row.id, 'deviationValue', '偏差值')" 
      :title="scope.row.deviationValue"
    >
      {{ scope.row.deviationValue != null ? scope.row.deviationValue : '-' }}
    </div>
  </template>
</el-table-column>