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方法调用的地方 将其置为空，并给与提示：