很多業務系統中都會用到表格/列表，大部分都是用組件，配合搜索接口可以實現，搜索按鈕是發送請求獲取數據來更新表格數據。

但不是所有的列表都會有對應的后端搜索接口，比如在對一個彈窗里面的列表進行選擇，數據量不是特別大的情況下希望前端支持篩選，可以更加方便快捷的對數據進行操作，這時候就需要用到數據篩選。
這部分代碼是大佬寫的，我覺得封裝的函數很好，所以在這里記錄學習一下。（應該不會被本人看到吧）

// 搜索相關數據
export function useSearchData<T extends Record<string, string | undefined>>(
  defaultSearchParams: T,
) {
  // 搜索參數
  const searchParams = reactive({
    ...defaultSearchParams,
  });

  // 分頁參數
  const page = reactive({
    pageNumber: 1,
    pageSize: 10,
  });

  // 返回的數據
  const allDataList = ref<any[]>([]);
  //通過篩選匹配實現搜索，使用計算屬性實現雙向數據和緩存
  const filteredList = computed(() => allDataList.value.filter((item) => {
    const filterKeys = Object.keys(defaultSearchParams);
    return filterKeys.every((filterKey) => !filterKey
      || !item[filterKey]
      || (item[filterKey].toLowerCase()?.includes(
        (searchParams[filterKey] || '').toLowerCase(),
      )));
  }));
  // 匹配上查詢條件總條數
  const total = computed(() => filteredList.value.length);

  // 當前頁面匹配上查詢條件的數據
  const dataList = computed(() => {
    const start = (page.pageNumber - 1) * page.pageSize;
    const end = page.pageNumber * page.pageSize;
    return filteredList.value.slice(start, end);
  });

//實時監聽篩選，數據一變化就回到第一頁，重新渲染數據
  watch(searchParams, () => {
    page.pageNumber = 1;
  }, { deep: true });
  watch(allDataList, () => {
    page.pageNumber = 1;
  });

  const visible = ref(false);
  //支持可選擇列表
  const selectedRowKeys: Ref<string[]> = ref([]);
  const loading = ref(false);

//把要用到的數據都反出去，方便外部與組件配合使用。
  return {
    loading,
    visible,
    searchParams,
    page,
    total,
    dataList,
    allDataList,
    selectedRowKeys,
    setAllDataList(list) {
      allDataList.value = list;
    },
  };
}

使用案例

const {
  // visible: showSelectTableDialog,
  searchParams,
  dataList,
  allDataList,
  selectedRowKeys,
  setAllDataList,
} = useFESearchData({
//傳入固定參數默認值
  databaseName: undefined,
  tableName: '',
});