vue+element-ui在表格中计算两数差值并让差值>20的字体显示为红色

          <el-table-column
            prop="differential" 
            label="差量" 
            class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <span :class="{ 'red-text': isDiffGreaterThan20(scope.row.sourceNum, scope.row.targetNum) }">
                {{ calculateDiff(scope.row.sourceNum, scope.row.targetNum) }}
              </span>
            </template>
          </el-table-column>

    // 判断差值是否大于20
    isDiffGreaterThan20(sourceNum, targetNum) {
      if (this.isNumeric(sourceNum) && this.isNumeric(targetNum)) {
        return Math.abs(sourceNum - targetNum) > 20;
      }
      return false;
    },
    // 判断是否为数值类型
    isNumeric(value) {
      return !isNaN(parseFloat(value)) && isFinite(value);
    },
    // 计算差值
    calculateDiff(sourceNum, targetNum) {
      if (this.isNumeric(sourceNum) && this.isNumeric(targetNum)) {
        return Math.abs(sourceNum - targetNum);
      }
      return '';
    }

.red-text {
  color: red;
}

注意sourceNum和targetNum为数值类型，即

// 表格内容
      tableData: [{
        verifyTime: "2023-11-11",
        sourceDatabaseName: "swop",
        sourceTableName: "xxxx",
        sourceNum: 1000,
        targetDatabaseName: "risk",
        targetTableName: "xxxx",
        targetNum: 800,
      },{
        verifyTime: "2023-12-11",
        sourceDatabaseName: "swop",
        sourceTableName: "xxxx",
        sourceNum: 100,
        targetDatabaseName: "risk",
        targetTableName: "xxxx",
        targetNum: 110,
      },]