Nuxt3中如何按分支及多条件正确筛选Mock数据？

问题根源 #

1. 直接拼接/${id}路由的问题：
   当你用url.value += /${formState.id}``时，MockAPI会根据全局唯一的id返回单条记录，完全忽略branch参数——因为这个路由的设计是通过全局id定位资源，和分支无关，所以你选Misawa分支但输入id=1时，会返回Okinawa分支的id=1记录（全局id=1属于该分支）。

2. Query参数模糊匹配的问题：
   把id放到query参数时，MockAPI对字符串类型的id（或数字转字符串后）会做包含匹配，比如输入id=1会匹配所有id包含"1"的记录（10、11），加上branch=Misawa的筛选，就返回了这两条不符合预期的结果。

正确实现方案 #

推荐采用「先按分支拉取数据，再在客户端做精准筛选」的方式，完全可控且符合你的需求：

步骤1：表单前置验证 #

先确保用户已选择分支，且至少填写一个其他字段：

// 表单验证逻辑
if (!formState.branch) {
  alert('请选择分支');
  return;
}
const hasOtherCondition = formState.id || formState.firstName || formState.lastName || formState.email;
if (!hasOtherCondition) {
  alert('至少填写一个其他查询字段');
  return;
}

步骤2：拉取分支数据+客户端精准筛选 #

// 1. 拉取选中分支的所有数据
const branchApiUrl = `https://689d3046ce755fe697880775.mockapi.io/api/mockdata/customers?branch=${encodeURIComponent(formState.branch)}`;
const { data: branchCustomers } = await useFetch(branchApiUrl);

// 2. 初始化筛选结果
let filteredResults = branchCustomers.value || [];

// 3. 按填写的条件依次筛选
if (formState.id) {
  // 精确匹配id：注意统一类型（Mock数据id是数字，表单输入可能是字符串）
  filteredResults = filteredResults.filter(cust => cust.id.toString() === formState.id.trim());
}
if (formState.firstName) {
  // 模糊匹配 firstName（不区分大小写）
  filteredResults = filteredResults.filter(cust => 
    cust.firstName.toLowerCase().includes(formState.firstName.toLowerCase())
  );
}
if (formState.lastName) {
  filteredResults = filteredResults.filter(cust => 
    cust.lastName.toLowerCase().includes(formState.lastName.toLowerCase())
  );
}
if (formState.email) {
  filteredResults = filteredResults.filter(cust => 
    cust.email.toLowerCase().includes(formState.email.toLowerCase())
  );
}

// 4. 处理最终结果
if (filteredResults.length === 0) {
  console.log('No customer found');
  // 这里渲染"无匹配客户"的提示
} else {
  console.log('匹配结果：', filteredResults);
  // 这里渲染匹配到的客户数据
}

备选方案：优化Query参数（依赖MockAPI支持） #

如果想直接通过MockAPI的Query参数完成筛选，需要确保id是精确匹配：

// 构建精确匹配的Query参数
const queryParams = {
  branch: formState.branch,
  // 仅当id存在时添加，且转为数字类型
  ...(formState.id && { id: Number(formState.id) }),
  ...(formState.firstName && { firstName: formState.firstName }),
  ...(formState.lastName && { lastName: formState.lastName }),
  ...(formState.email && { email: formState.email })
};

const { data } = await useFetch('https://689d3046ce755fe697880775.mockapi.io/api/mockdata/customers', {
  query: queryParams
});

// 检查结果：如果MockAPI支持数字id的精确匹配，此时返回的就是符合条件的数据
const finalResults = data.value || [];
if (finalResults.length === 0) {
  // 显示"No customer found"
}

为什么这个方案有效 #

• 先拉取分支数据，确保所有后续筛选都在该分支范围内进行，符合你「先按分支筛选，再匹配其他条件」的需求。
• 客户端筛选可以完全自定义匹配规则（精确/模糊、大小写敏感等），不受MockAPI查询规则的限制。

内容的提问来源于stack exchange，提问作者Kumiko Stewart