vue实现五个输入框正相关或负相关排序需求

vue实现五个输入框正相关或负相关排序需求

今天又遇到一个比较棘手的问题,不夸张的说 我想了一个多小时没想出来,最后好在是解决了。
先说需求:

在这里插入图片描述
有这么一个页面,需要我们五个输入框在输入的时候,保证输入的值必须是正相关或者是负相关的,也就是必须

优秀值>良好值>平均值>较低值>较差值

或者

优秀值<良好值<平均值<较低值<较差值

由于无法确定谁先输入 谁后输入,也无法确定是此行肯定是正相关或者负相关,采用了如下思路;

    /**
     * 更改为null,或者'' 的number值。
     */
    judgeNumber(val) {
      return val === '' || val === null ? 'noData' :   Number(val);
    },

	    /**
     * 先判断一下当前数据是否满足其大小比较的规则,即 优秀值>良好值>平均值>较低值>较差值
     */
    judgeValue(row, keyValue) {
      let {
        goodValue, fineValue, averageValue, lowerValue, worseValue
      } = row;
      goodValue = this.judgeNumber(goodValue);
      fineValue = this.judgeNumber(fineValue);
      averageValue = this.judgeNumber(averageValue);
      lowerValue = this.judgeNumber(lowerValue);
      worseValue = this.judgeNumber(worseValue);
      const initialList = [goodValue, fineValue, averageValue, lowerValue, worseValue].filter(item => item !== 'noData');
      const positiveList = initialList.slice().sort((a, b) => a - b);
      const reverseList = initialList.slice().sort((a, b) => b - a);
      const flag = initialList.join() === positiveList.join() || initialList.join() === reverseList.join();
      return flag;
      }

思路:
通过judgeNumber方法,将当前行未填写的数据置为noData,
然后通过filter将当前已填数据形成一个数组。
通过正向排序和反向排序来获取当前可能的正负相关数组;
最后通过join(),将现有数组及两个排序好的数组进行字符串化。
然后通过对比是否相等来确定 是否有不遵循正负相关的数据存在。
并在judgeValue方法调用的地方 将其置为空,并给与提示:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值