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