应手动重置筛选字段而非调用form.reset()：清空文本类输入值、select置首项、复选/单选取消勾选；框架中应通过状态对象管理筛选条件并重置，请求时过滤空值。
怎么用 reset() 清空表单但保留非筛选字段
直接调用 form.reset() 会把整个表单恢复到初始状态，包括那些你不希望重置的字段（比如隐藏的 id、token 或只读的业务标识）。这不是“清空筛选”，是“清空一切”。
真正可控的做法是遍历所有筛选相关控件，手动设值：
-
input[type="text"]、input[type="number"]、textarea→ 设value = "" -
select→ 设selectedIndex = 0（前提是第一个option是空或“全部”） -
input[type="checkbox"]、input[type="radio"]→ 设checked = false，但注意别误清关联的业务开关
别依赖 form.reset() 做筛选重置——它不区分语义，只认 HTML 初始值。
为什么 type="reset" 按钮不能直接用
浏览器原生 type="reset" 按钮本质就是触发 form.reset()，行为完全一致。它看起来省事，实则埋雷：一旦你后来给某个 input 加了 value="123"（比如默认选中某分类），这个值就会变成“初始值”，点重置就回不去空状态。
更麻烦的是，动态渲染的筛选项（比如 JS 插入的 select 选项）不会被 reset() 感知，导致界面和 DOM 状态不一致。
所以：删掉 type="reset"，换成 type="button" + 自定义逻辑。
Vue/React 里怎么避免手动操作 DOM
在响应式框架里硬查 document.querySelectorAll 是倒退。应该把筛选条件收归为一个对象（比如 filters），按钮点击时直接赋值为空对象或预设默认值。
例如 Vue 中：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
methods: {
resetFilters() {
this.filters = {
keyword: '',
category: '',
minPrice: null,
status: 'all'
}
}
}
React 函数组件同理，用 setFilters({}) 或 setFilters(defaultFilters)。关键在于：筛选状态必须和视图双向绑定，而不是靠 DOM 值反推。
容易踩的坑：filters 里混入非筛选字段（如 page、pageSize），重置时一并清空会导致分页错乱——这些该单独管理。
后端接口要不要也传空值？
前端清空了，但发请求时如果还带着 category= 或 keyword=null，有些后端会当真实条件处理（尤其没做参数校验时），结果返回空数据而非“全量”。
正确做法是：重置后构造请求参数时，过滤掉所有空值、null、undefined 和空字符串，只传真正有效的筛选项。
示例（JS）：
const params = Object.fromEntries( Object.entries(filters).filter(([, v]) => v != null && v !== '') )
否则，你前端看着清空了，接口却在默默按空字符串查——这种问题调试起来特别绕，因为网络面板里看不出逻辑错误，只看到“请求发了，结果不对”。
最常被忽略的一点：时间范围筛选（如 startAt/endAt）清空后，别忘了同时清掉“是否启用时间筛选”的标记位，否则后端可能仍按默认区间查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
