vue element 区间范围不能重复校验

在这里插入图片描述

	 // 使用示例
	<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;
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值