vue js 模糊匹配搜索查詢

大家應該平時涉及到查詢基本上都是調用后端接口就完事，傳入字符串~調用接口~返回數據~~~

但是不少場景也需要前端自己做匹配查詢

那么今天就簡單做一個吧！

廢話不多說 直接上代碼：

1. 封裝方法：

export function filterSearch({ oldList = [], search = "", key = "value" }) {
  const old_list = [...oldList];
  const new_list = old_list.filter((value) => {
    value.active = value[key] === search;
    return toSearchString(value[key]).indexOf(toSearchString(search)) !== -1;
  });
  if (search) return new_list;
  return old_list;
}

export function toSearchString(value) {
  return String(value).toLowerCase();
}

2. 使用：

    // 輸入框的值變化時
    onInput(event) {
      const inputVal = event.detail.value;
      const list = filterSearch({
        search: inputVal,
        oldList: this.list
      });
      this.innerList = list;
    },

innerList：查詢后的數組；
oldList：也就是原始數組，在未查詢到數據時，innerList會為空數組，需要oldList讓數組重復使用；
search：當然就是查詢內容了；

不復雜啊 就是個簡單的小功能~~~ 平時做業務的時候 想着記錄一下 love&peace