html模板仅负责静态渲染，所有过滤排序逻辑必须由javascript实现，通过data-*属性提供语义化钩子，js根据data-type动态选择比较策略，并确保data-field与对象key严格一致。
HTML 模板本身不执行任何过滤或排序逻辑——它只是静态结构，所有数据处理必须由 JavaScript 控制，且关键在于「模板只负责渲染，逻辑必须与视图分离」。
为什么不能在 HTML 模板里写 filter/sort 表达式
像 v-for（Vue）、*ngFor（Angular）或 JSX 中的 .filter().sort() 看似写在模板里，实则运行在 JS 执行上下文中。纯 HTML（无框架）中连 if 或 for 都不存在，更别说 filter 这类数组方法。常见错误是误以为给 <table> 加个 <code>data-sort="name" 就能自动排序，结果发现毫无反应。
- HTML 是声明式标记语言，不具备运行时计算能力
- 浏览器解析 HTML 时不会执行任何 JavaScript，除非显式绑定事件或脚本
- 试图用 CSS
order属性“排序”表格行，只会改变视觉顺序，document.querySelectorAll('tr')获取的 DOM 顺序不变，后续 filter 仍按原始顺序遍历
真实有效的模板配合方式：data-* + JS 驱动
模板唯一该做的事，是提供可被 JS 可靠读取的语义化钩子。比如用 data-type="number" 标记数字列，用 data-field="price" 对齐数据字段名，避免硬编码索引。
- 表头
<th data-field="createdAt" data-type="date">时间</th>—— 后续 JS 可直接映射到对象属性 - 行数据用
data-id或嵌套 JSON（data-row='{"id":1,"status":"active"}'），比反复td.innerText提取更稳定 - 避免用 class 名（如
class="price-col"）做逻辑判断，CSS 类可能被复用、覆盖或压缩，不可靠 - 模板中不写任何条件渲染逻辑，空状态、加载中、筛选无结果等，全部由 JS 控制
tbody的 innerHTML 或 class 切换
排序函数如何匹配模板中的 data-type
点击表头后，JS 必须根据 data-type 动态选择比较策略，否则字符串 "10" 会排在 "2" 前面，日期字段会按文本乱序。
-
data-type="number"→ 用a[field] - b[field]，防 NaN：先Number(a[field]) || 0 -
data-type="date"→ 统一转时间戳：new Date(a[field]).getTime() - new Date(b[field]).getTime() -
data-type="string"→ 用a[field].localeCompare(b[field], 'zh-CN')，中文排序才准 -
data-type="boolean"→ 直接(a[field] ? 1 : 0) - (b[field] ? 1 : 0)，避免true > false在某些引擎下返回 undefined - 空值统一处理：
a[field] == null ? -1 : b[field] == null ? 1 : 0，确保 null 排最前
过滤逻辑必须合并进单次 filter()，不能链式调用
用户同时选了部门、状态、输入搜索词，如果写成 data.filter(...).filter(...).filter(...)，每调用一次就新建一个数组副本，1000 条数据会触发 3 次全量遍历，CPU 白耗。
- 正确做法：把所有条件塞进一个回调，用
&&连接，一次遍历完成 - 多选下拉用
Set存选项：const selectedStatus = new Set(['active', 'pending'])，比每次arr.includes(val)快得多 - 文本搜索加防抖：输入框
input事件绑定setTimeout，延迟 300ms 再触发filter()，否则连打 “abc” 触发 3 次 - 数值范围筛选前校验：
!isNaN(Number(minPrice)) && !isNaN(Number(maxPrice))，别信minPrice !== ''
真正容易被忽略的是：模板里写的 data-field 和 JS 里操作的对象 key 必须完全一致（包括大小写、下划线），差一个字符就导致 sort 无效或 filter 返回空数组，而控制台不会报错——因为 obj['userName'] 取不到值时只是 undefined，参与比较得到 NaN 或 0，静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
