点击表头可切换升序/降序，通过data-sort属性和currentsort状态变量控制排序字段与方向，用array.sort()实现多类型数据排序，动态更新tbody及↑↓箭头图标，并支持localstorage记忆、多列排序等增强功能。

点击表头即可切换升序/降序，核心是记录当前排序状态并动态更新表格数据和箭头图标。

1. 表头添加可点击事件和状态标识

给每个 添加 data-sort 属性标明字段名，并绑定点击事件。用一个 JavaScript 变量（如 currentSort = { key: 'name', order: 'asc' }）跟踪当前排序字段和方向。

• 首次点击某列：按该字段升序排列，显示 ↑ 箭头
• 再次点击同一列：切换为降序，显示 ↓ 箭头
• 点击其他列：重置为该列升序，清除之前列的箭头

2. 排序逻辑用 Array.sort() 实现

假设表格数据是数组对象（如 rows = [{id:1,name:'Alice'},...]），排序时根据 currentSort.key 取值比较：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 升序：a[key] > b[key] ? 1 : -1（注意处理字符串、数字、null）
• 降序：把结果取反，或直接 b[key] > a[key] ? 1 : -1
• 推荐统一用 localeCompare() 处理字符串，数字用 Number() 转换避免隐式转换错误

3. 动态更新 DOM 和箭头图标

排序后重新渲染 tbody 或用 innerHTML 替换行内容；同时遍历所有 ，清空箭头，只在当前排序列插入对应符号（可用 Unicode ↑↓ 或小图标）：

• <span class="sort-icon">↑</span> 或内联样式 style="color:#666;font-size:12px;"
• 也可用 CSS 类控制显隐，比如 .asc::after { content: " ↑"; }

4. 可选增强：记忆上次排序、支持多列、禁用部分列

给需要排序的列加 data-sortable="true"，跳过不响应的表头；localStorage 存上一次的 key/order，页面加载后自动执行；多列排序可在点击时按住 Shift 键追加次要排序条件。

不复杂但容易忽略细节：空值统一排最后、中文按拼音排序需用 Intl.Collator、保持原 DOM 结构避免丢失事件绑定。

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