vue实现搜索功能

2021年9月6日 2点热度 0条评论 来源: SunnyRun!

前言:最近小编也是刚跳槽新的公司一个月,前端技术栈是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();
    原文作者:SunnyRun!
    原文地址: https://blog.csdn.net/weixin_43624724/article/details/90900247
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。