// 使用示例
<el-table-column label="一级报警阈值" align="center" prop="firstStart">
<template slot-scope="scope">
<el-form-item :prop="`tableList.${scope.$index}.firstStart`"
:rules="[{ required: true, validator:validateChange, trigger: 'change'}]"
>
<div class="fl-zhi-input">
<el-input v-model="scope.row.firstStart" placeholder="请输入"></el-input>
<span class="fl-cross">-</span>
<el-input v-model="scope.row.firstEnd" placeholder="请输入"></el-input>
</div>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="二级报警阈值" align="center" prop="secondStart">
<template slot-scope="scope">
<el-form-item :prop="`tableList.${scope.$index}.secondStart`"
:rules="[{ required: true, validator:validateChange, trigger: 'change'}]"
>
<div class="fl-zhi-input">
<el-input v-model="scope.row.secondStart" placeholder="请输入"></el-input>
<span class="fl-cross">-</span>
<el-input v-model="scope.row.secondEnd" placeholder="请输入"></el-input>
</div>
</el-form-item>
</template>
</el-table-column>
...
只需要修改 intervalFieldList 参数
// 校验
validateChange(rule, value, callback) {
let data = rule.field.split(".")
// 获取当前行数据
let row = this.forms.tableList[data[1]]
// 需要校验区间字段
const intervalFieldList = [
['firstStart','firstEnd'], // 一级报警阈值
['secondStart','secondEnd'],// 二级报警阈值
['threeStart','threeEnd'],// 三级报警阈值
['fourStart','fourEnd'],// 四级报警阈值
]
let fieldsList = [] // 区间对比
let forbiddenIntervals = [] // 禁止区间数组
for(let i in intervalFieldList) {
if(intervalFieldList[i].includes(data[2])) {
// 当前区间对比
fieldsList = intervalFieldList[i]
forbiddenIntervals = []
// 获取其他区间数据
for(let s in intervalFieldList) {
if(!intervalFieldList[s].includes(data[2])) {
forbiddenIntervals.push({ min: row[intervalFieldList[s][0]], max: row[intervalFieldList[s][1]] })
}
}
}
}
// 排序
forbiddenIntervals = this.sortAndMergeIntervals(forbiddenIntervals)
// 判断是否在区间中
const isForbidden = forbiddenIntervals.some(interval => {
return parseFloat(value) >= parseFloat(interval.min) && parseFloat(value) <= parseFloat(interval.max)
});
if(fieldsList.includes(data[2])) {
if (parseFloat(row[fieldsList[0]])>parseFloat(row[fieldsList[1]])) {
callback(new Error('左边不能大于右边'));
}else if (isForbidden) {
callback(new Error('数字已存在范围内'));
} else if(!row[fieldsList[0]]){
callback(new Error('请输入左侧'));
} else if( !row[fieldsList[1]]){
callback(new Error('请输入右侧'));
} else {
callback();
}
}
},
sortAndMergeIntervals(intervals) {
// 排序区间数组
intervals.sort((a, b) => a.min - b.min);
// 合并重叠的区间
const mergedIntervals = [];
intervals.forEach(interval => {
if (mergedIntervals.length === 0 || parseFloat(mergedIntervals[mergedIntervals.length - 1].max) < parseFloat(interval.min)) {
// 如果当前区间不与最后一个合并的区间重叠,则直接添加
mergedIntervals.push(interval);
} else {
// 如果当前区间与最后一个合并的区间重叠,则更新最后一个合并区间的最大值
mergedIntervals[mergedIntervals.length - 1].max = Math.max(parseFloat(mergedIntervals[mergedIntervals.length - 1].max),parseFloat(interval.max) );
}
});
return mergedIntervals;
},