记录 vue 3 多联动筛选解决方案

Mintal2025-04-09

在做后台表格页面时，经常遇到用户希望通过多个字段筛选数据的需求。

这种需求一开始看着不难，直接在 filter 里写一堆条件判断就行。但当字段一多，页面复用性一低，代码就容易一团乱麻。所以我干脆封了个小 hooks，叫做 useFilter，来处理这类 多条件筛选。

核心逻辑：封装一个通用的 hooks

先看这个 useFilter.ts 文件，结构很简单但很实用：

import {ref} from 'vue';

export function useFilter() {
    const filteredData = ref([]);
    const isEmpty = (val: any) =>
        val === undefined || val === null || val === '';

    const filterData = (data, filters) => {
        filteredData.value = data.filter(item => {
            return Object.entries(filters).every(([field, filterValue]) => {
                if (isEmpty(filterValue)) return true; // 忽略空值
                const itemValue = item[field];
                return itemValue?.toString().includes(filterValue.toString());
            });
        });
    };

  return {
    filteredData,
    filterData
  };
}

这里的核心思想就是：

你传一堆筛选条件过来：

每条数据都对这些条件 every 一下；
条件为空就跳过，不做判断；
有值的字段，就做一个字符串的包含判断。

这样做的好处是：不管你有几个筛选字段，都能通吃。不用再在组件里写一堆 if else 或 v-if 去控制筛选逻辑。

页面中怎么用？

再来看页面这块，实际调用就很简单了：

const {filteredData, filterData} = useFilter();

const handleFilterData = async () => {
    const filters = {
        name: formValue.value.name,              // 姓名
        age: formValue.value.age,                // 年龄
        gender: formValue.value.gender,          // 性别
        personality: formValue.value.personality,// 性格
        profession: formValue.value.profession,  // 职业
        hobby: formValue.value.hobby             // 爱好
    };

        await nextTick();
        filterData(tableDataMock.value, filters); // 使用 hook 筛选
        data.value = filteredData.value;// 显示到页面
    }