列表/表格搜索方法->前端实现-526互联

很多业务系统中都会用到表格/列表，大部分都是用组件，配合搜索接口可以实现，搜索按钮是发送请求获取数据来更新表格数据。

但不是所有的列表都会有对应的后端搜索接口，比如在对一个弹窗里面的列表进行选择，数据量不是特别大的情况下希望前端支持筛选，可以更加方便快捷的对数据进行操作，这时候就需要用到数据筛选。
这部分代码是大佬写的，我觉得封装的函数很好，所以在这里记录学习一下。（应该不会被本人看到吧）

// 搜索相关数据
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: '',
});