vue实现搜索功能

前端登顶之巅–全方位为你梳理前端进阶之路、最全前端知识/面试点总结

前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是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();