做后台系统或者数据管理软件时，经常遇到一堆筛选条件要处理。比如查订单，既要按地区选，又要按状态、时间、金额层层缩小范围。条件一多，页面乱，逻辑更乱，用户点来点去还找不到想要的结果。
问题出在哪？
常见的问题是：所有条件堆在一行，滚动条拉半天；点一个下拉框，其他选项跟着变，但变的规则不清晰；清空某个条件时，子级没联动重置，结果数据对不上。
比如你先选了“华东区”，下面才出现“上海”“南京”等城市。这时候你把大区改成“华北”，但城市还是显示“上海”，点搜索就出问题——这其实是状态没清理干净。
结构上分层，视觉上收拢
别把所有条件平铺出来。按业务逻辑分组，比如“区域信息”“时间范围”“订单状态”各成一块。可以用折叠面板，默认只展开常用项，高级筛选点一下再展开。
这样界面清爽，用户也不会被吓到。就像超市货架，先把粮油、日化分开，再在每个区里细分。
父子联动要明确
上级变了，下级必须重置或重新加载。比如选择省份后，城市下拉框才可选。代码处理时，监听上级字段变化：
watch: {
provinceId(newVal) {
if (newVal) {
this.cityList = getCityByProvince(newVal);
this.queryForm.cityId = '';
}
}
}
这样换省的同时，城市自动清空，避免无效组合。
URL 保存当前筛选状态
用户调好一堆条件，刷新页面全没了？体验很差。可以把筛选参数拼进 URL 的 query 里，比如：
?region=2&city=15&status=1&start_date=2024-01-01
页面加载时优先读 URL 参数填充表单，改完条件也同步更新地址栏。用户复制链接发给别人，打开就是一样的筛选结果，协作方便多了。
提供一键清空和默认条件
加个“重置”按钮，点一下回到初始状态。但注意别把用户好不容易填的全清了，可以区分“清空”和“恢复默认”。比如默认查最近7天的数据，重置就回到这个范围，而不是所有都留空。
复杂场景用过滤器配置化
有些系统面向专业用户，比如运营或数据分析，他们需要自定义组合条件。这时候可以做成“条件组”形式，允许添加多个规则块，每块内是“字段 + 操作符 + 值”的结构。
例如：
- 订单状态 等于 已发货
- 且 金额 大于 100
- 且 下单时间 在 过去7天内
这种结构灵活，支持“与/或”嵌套，适合复杂查询需求。
多层级过滤不是技术难题，关键是把用户路径理清楚。谁在用？他们最常查什么？哪些条件必须联动？把这些想明白，再动手设计，比直接堆控件强得多。