用 reactive 实现多条件联合筛选面板的核心是构建结构化响应式状态树：一、按业务语义分组定义嵌套对象；二、模板中用点语法绑定保持语义清晰；三、筛选函数直接消费整个状态树；四、通过初始结构浅拷贝实现可控重置。

用 reactive 实现多条件联合筛选面板的参数状态树，核心是把所有搜索字段组织成一个响应式对象，并让筛选逻辑依赖它——不是每个字段单独声明，而是统一管理、结构清晰、可扩展性强。

一、定义结构化的筛选参数状态树

把不同类型的筛选条件（文本输入、下拉选择、时间范围、树形节点 ID 等）按业务语义分组，用嵌套对象组织。例如商品管理页：

• 基础信息：商品名称、店铺标题、条码
• 业务状态：上架状态（布尔）、审核状态（枚举值）
• 时间区间：上架开始时间、结束时间（字符串或 Date）
• 分类与归属：所属类目 ID 数组、品牌 ID、供应商 ID

对应代码：

const searchParams = reactive({<br>  basic: { goods_name: '', shoptitle: '', barcode: '' },<br>  status: { is_on_sale: null, audit_status: '' },<br>  time: { start_time: '', end_time: '' },<br>  category: { category_ids: [], brand_id: '', supplier_id: '' }<br>})

二、模板中绑定嵌套字段，保持语义清晰

在表单控件里直接使用点语法绑定，避免扁平化命名带来的歧义（比如不会出现 auditStatus 和 audit_status 混用）：

• <el-input v-model="searchParams.basic.goods_name"></el-input>
• <el-select v-model="searchParams.status.audit_status"></el-select>
• <el-date-picker v-model="searchParams.time.start_time"></el-date-picker>
• <el-cascader v-model="searchParams.category.category_ids"></el-cascader>

这种写法让 UI 层和状态层结构一致，改一个字段位置，模板和逻辑同步调整，不易漏掉。

Auth0 React

已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。

下载

三、筛选函数直接消费整个状态树

在 computed 或请求函数中，直接解构或遍历 searchParams，无需拼一堆零散变量。例如：

const filterQuery = computed(() => {<br>  const q: Record<string any> = {};<br>  if (searchParams.basic.goods_name) q.goods_name = searchParams.basic.goods_name;<br>  if (searchParams.status.is_on_sale !== null) q.is_on_sale = searchParams.status.is_on_sale;<br>  if (searchParams.time.start_time) q.start_time = searchParams.time.start_time;<br>  if (searchParams.category.category_ids.length)<br>    q.category_ids = searchParams.category.category_ids;<br>  return q;<br>});</string>

这样做的好处是：新增一个筛选字段，只需在 searchParams 对应层级加字段 + 模板加控件 + filterQuery 加判断，三处改动位置明确、互不干扰。

四、重置与初始化更可控

清空筛选时，不是逐个赋空值，而是用初始结构做浅拷贝重置：

• 先定义初始值：const initialParams = { basic: { ... }, status: { ... }, ... }
• 重置函数：const resetFilters = () => Object.assign(searchParams, deepClone(initialParams))

如果后续要支持“保存常用筛选组合”，也可以直接序列化整个 searchParams 对象，结构天然适配。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！