表格排序图标应优先用css伪元素::after插入unicode箭头（▲/▼），避免覆盖文本、确保可访问性；js仅切换class和aria-sort属性，兼容ie需回退span方案。
表格排序时如何显示升序/降序小图标
直接在表头单元格里加 ▲（▲）或 ▼（▼）字符最轻量，不用额外加载图标字体或图片，兼容性好到 IE8 都能显示。但注意：这些是 Unicode 箭头符号，不是 HTML 实体，别写成 ▲（会原样输出文字），也别用 ↑ 这类旧实体（部分浏览器不支持）。
常见错误是把图标硬塞进 textContent 里导致覆盖原有文字，正确做法是用伪元素或拼接字符串保留原始文本：
- 用 CSS
::after添加图标，不影响innerText和可访问性 - 如果用 JS 动态插入，建议在表头文字后追加
document.createTextNode(' ▲')，而非直接赋值innerHTML - 排序状态切换时，只改图标不重写整个表头内容，避免焦点丢失或屏幕阅读器重复播报
用 CSS 伪元素控制排序图标的显隐和方向
比内联字符更可控：图标位置、颜色、大小、过渡动画全由 CSS 管理，JS 只需切换 class。关键点是用 content 值区分方向，且必须设 display: inline-block 才能设置宽高和对齐。
示例代码片段：
th.sorted-asc::after {
content: ' ▲';
color: #007bff;
}
th.sorted-desc::after {
content: ' ▼';
color: #007bff;
}
th.sortable::after {
content: ' ▽';
color: #999;
font-size: 0.8em;
}
容易踩的坑：
-
content中的空格不能省——否则图标紧贴文字难分辨 - 没给伪元素设
vertical-align: middle，图标会和文字基线错位 - 用
visibility: hidden隐藏未排序图标，别用display: none（会破坏行内布局流）
JavaScript 排序逻辑里怎么同步更新图标状态
图标只是视觉反馈，核心是维护一个 sortState 对象，记录当前按哪列、什么顺序排。每次点击表头，先读当前状态，再决定下一步：同列再点就反转，不同列就重置为升序。
实操要点：
- 用
data-sort-key属性标识每列表对应的字段名，别依赖列索引（增删列会崩） - 切换图标前，先清除所有
th的sorted-asc/sorted-desc类，再给当前列加对应类 - 降序优先级高于升序：用户点一次是升序，再点是降序，第三次才回到“未排序”状态（此时清空图标）
- 排序后记得调用
table.focus()或th.focus()，保持键盘可操作性
IE11 及以下浏览器的兼容处理
IE 不支持 ::after 在 <th> 上渲染，或者对 <code>content 中的 Unicode 箭头支持异常。这时候得回退到内联 span 方案，但要手动管理 DOM。
检测和修复方式：
- 用
getComputedStyle(th, '::after').content === 'none'判断伪元素是否生效（IE 返回none） - 回退方案：每个
th末尾动态插入<span class="sort-icon"></span>，用 JS 控制其textContent - 别用
font-family: 'Arial Unicode MS'这类字体强制渲染箭头——移动端可能无此字体，反而显示方块
真正麻烦的是可访问性：屏幕阅读器默认不读伪元素内容。如果业务要求 WCAG 2.1 合规，必须用 aria-sort 属性（值为 ascending/descending/none），图标只是辅助，状态必须靠这个属性暴露给辅助技术。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
