:cell-style用于单元格动态样式
:row-style-class用户整行动态样式
场景需求:根据属性值的阈值标准对不符合阈值的进行标红警示
效果不同就不多说了,要注意传入参数与获取对应值的方式(多console.log就好了),:cell-style的样式必须是要写在return后面的,而不可以像:row-style-class那样写在style然后将样式名写在return后中(不知道是不是有地方没注意)
:cell-style
// 获取异常阈值数据并判断
compareThresholdClass({ row, column }) {
for (const item of this.thresholdList) {
const { mgParamId, operator, alarmVal } = item
const foundParam = this.paramThreshold.find(item => item.mgParamId === mgParamId)
if (foundParam) {
const compareParam = foundParam.compareParam
// console.log(compareParam)
if (row.hasOwnProperty(compareParam) && column.property === compareParam) {
const value = row[compareParam]
// console.log(compareParam + value)
if (operator === '大于等于' && value >= alarmVal) {
return 'color: red'
} else if (operator === '小于等于' && value <= alarmVal) {
return 'color: red'
} else if (operator === '大于' && value > alarmVal) {
return 'color: red'
} else if (operator === '小于' && value < alarmVal) {
return 'color: red'
}
}
}
}
},
:row-style-class
::v-deep .not-fit-data {
color: red;
}
// 获取异常阈值数据并判断
compareThresholdClass(row) {
for (const item of this.thresholdList) {
const { mgParamId, operator, alarmVal } = item
const foundParam = this.paramThreshold.find(item => item.mgParamId === mgParamId)
if (foundParam) {
const compareParam = foundParam.compareParam
// console.log(compareParam)
if (row.row.hasOwnProperty(compareParam)) {
const value = row.row[compareParam]
if (operator === '大于等于' && value >= alarmVal) {
return 'not-fit-data'
} else if (operator === '小于等于' && value <= alarmVal) {
return 'not-fit-data'
} else if (operator === '大于' && value > alarmVal) {
return 'not-fit-data'
} else if (operator === '小于' && value < alarmVal) {
return 'not-fit-data'
}
}
}