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

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

• 正偏差值（高于标准温度）显示为红色

• 负偏差值（低于标准温度）显示为蓝色

• 零或空值显示为默认颜色

一、动态Class绑定

<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

.deviation-positive {color: #ff4d4f;font-weight: 500;
}.deviation-negative {color: #1890ff;font-weight: 500;
}.deviation-zero {color: #606266;
}

二、动态Style绑定

<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>

方法：

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' };}}
}

三、模板内联判断

<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>