<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, },]
标签:vue,20,return,isNumeric,差值,sourceNum,targetNum From: https://www.cnblogs.com/tingorb/p/18191245