需求：在輸入值后，拿當前值和當前行中某些數據比較，根據特定規則動態去改變樣式 功能：大于上差+標準值：箭頭向上，顏色變紅，小于下差+標準值：箭頭向下，顏色變紅 ``` <el-table ref="multipleTable" :data="formTableData" tooltip-effect="dark" border style="width: 100%;0verflow-x:auto" :header-cell-style="{ 'text-align': 'center', background: '#f3f3f3', 'font-size': '12px', 'font-weight': 'normal', color: '#606266', }" > <el-table-column v-for="(item,key) in detailListHeader" :label="item.title" :prop="item.field" :key="key" width="100px" > </el-table-column> <el-table-column v-for="(val,i) in tableHead" :label="val.name" :prop="val.field" width="150px" :key="val.field" > <template slot-scope="scope"> <el-input :class="scope.row[`meter_${val.field}`] && scope.row[`meter_${val.field}`].isBad ?'isBad' : ''" v-model="scope.row[val.field]" type="number" @change="sampleChange($event, scope.$index, scope.row,val.field)" :disabled="false" :min="0" :max="999999999" :precision="2" > <template v-if="scope.row[`meter_${val.field}`] && scope.row[`meter_${val.field}`].isBad" slot="prepend" > {{ scope.row[`meter_${val.field}`].isHigh ? '↑' : '↓' }}</template> </el-input> </template> </el-table-column> </el-table> ``` ``` // 輸入值改變 sampleChange(val, i, row, fieldName) { let low = row.standardvalue + row.under; //下限 let high = row.standardvalue + row.top; //上限 let obj = {}; let field = "meter_" + fieldName; if (val) { if (val > high) { obj.isBad = true; obj.isHigh = true; this.$set(this.formTableData[i], field, obj); //是否是不良 } else if (val < low) { // this.$message.error("小于下限值"); obj.isBad = true; obj.isHigh = false; this.$set(this.formTableData[i], field, obj); //是否是不良 } else { obj.isBad = false; obj.isHigh = false; this.$set(this.formTableData[i], field, obj); //是否是不良 } } }, //查詢時，增加標識 query(){ recordQuery2({ id: row.id }).then(res => { if (res.code == 200) { this.formTableData = res.data.insMpList; let arr = ["sample1", "sample2", "sample3", "sample4", "sample5"]; if (this.formTableData.length > 0) { this.formTableData.forEach((val, i) => { let low = val.standardvalue + val.under; //下限 let high = val.standardvalue + val.top; //上限 let filedArr = Object.keys(val); //字段名存儲 filedArr.forEach((item, i) => { // 判斷是否是需要填寫的樣品字段 if (arr.indexOf(item) != -1) { let field = "meter_" + item; //增加前綴做唯一標識 let obj = {}; if (val[item]) { // 樣品值比較 if (val[item] > high) { obj.isBad = true; //是否是壞的 obj.isHigh = true; //是否偏高 this.$set(val, field, obj); } else if (val[item] < low) { obj.isBad = true; obj.isHigh = false; this.$set(val, field, obj); } else { obj.isBad = false; obj.isHigh = false; this.$set(val, field, obj); } } } }); }); } } else { this.$message.error(res.message); } }); } ``` ``` <style scoped> /deep/ .el-input-group__prepend { color: red !important; padding: 0 10px; } .isBad >>> .el-input__inner { color: red !important; } </style> ```