vue实现搜索功能

8 篇文章 0 订阅
5 篇文章 0 订阅

欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜
在这里插入图片描述

前言:最近小编也是刚跳槽新的公司一个月,前端技术栈是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();
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SunnyRun!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值