欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结
前言:最近小编也是刚跳槽新的公司一个月,前端技术栈是vue+element也是市面上比较常用的框架之一了,同时也花费一点时间总结一下最近的坑,react转vue的一个过程确实是有些心累的,其主要原因还是写法的不同吧。
需求:
最近接到一个前端实现页面的筛选搜索功能,是多条件的;那就分析一下需求的小思路,怎么去实现这样的一个过程。
1.请求拿数据,后端是一次性全部扔给前端了。(问题点,前端筛选要不要实时发请求拿数据,依据需求而定)
2.点击测试账号显示所有数据(默认是没有测试账号的数据),取消不显示测试账号
3.出席状态、是否请假、当前是否在教室,进行数据的交叉筛选。
代码区域:
Demo1 - 精确搜索:
util工具库方法,只需关注search(obj, data)入参和strategies自定义字段规则配置
/**
* @param {String} key 要检索的key值eg:name
* @param {String|Number} value 要搜索的数据值匹配eg:'小明'
* @param {Array} data 后端返回所有数据值
* @return {Array}
* @description 自定义规则状态
*/
const strategies = (label) => ({
[label]: (value, data, key) => {
return filter(value, data, key);
}
})
const filter = (value, data, key) => {
return data.filter(item => item[key] && item[key].toString() === value.toString());
}
const rulesObj = (obj) => {
let arr = [];
for (let key in obj) {
arr.push({
label: key,
value: !Array.isArray(obj[key])
&& typeof obj[key] !== 'number' ? obj[key].trim() : obj[key]
})
}
return arr;
}
class SearchList {
constructor() {
this.cache = null;
}
/**
* @param {Object} search 我们的搜索条件{name: '小米', status: 1} => [{label: 'name', value: '小米'}]
* @param {Array} datalist 后端返回数据[{name: '小明', status: 1, sex: 1}]
* @description 依据筛选针对性做数据过滤
*/
search(search = {}, datalist = []) {
const rules = rulesObj(search);
this.cache = datalist;
rules.forEach(item => {
let label = item.label;
this.cache = strategies(label)[label](item.value, this.cache, label)
});
return this.cache;
}
}
export default new SearchList();
console.log(new SearchList().search(
{ status: [1, 2] },
[{ name: '小米', sex: 1 }, { name: '小明', sex: 0, status: [1, 2] }])
)
Demo2 - 模糊搜索
模糊式搜索,下面有更加合理的一种展现详看下方Demo,使用更加灵活
// 后续的一个查询方法补充,缺陷不支持且的过滤方式,
class SearchList {
constructor() {
}
search(obj, data) { // obj => 搜索条件; data => 后端数据datalist
let dataScoure = [];
data.forEach(item => {
if (this.hasChange(obj, item)) { // 判断输入值(搜索条件) 是否存在对象数组上面
dataScoure.push(item);
}
})
return dataScoure;
}
// 使用递归遍历所有属性判断是否在对象里面匹配到对应值
hasChange(obj, item) {
let bool = false
let loop = obj => {
for (let key in obj) {
if (String(obj[key]).trim().indexOf(item[key]) !== -1) {
bool = true
}
if (typeof obj[key] === 'object' && obj[key] !== null) {
loop(obj[key])
}
}
}
loop(obj)
return bool;
}
}
export default new SearchList();