Vue中表格多条件排序的核心是用computed封装响应式排序逻辑，通过状态分离（字段/方向）、逻辑解耦（多字段优先级）和数据不可变（返回新数组）实现；支持单击切换升序、再点降序、换字段重置为升序。
Vue 中表格的多条件排序，核心是用计算属性（computed）封装可响应、可复用的排序逻辑，避免在模板中写复杂表达式，也防止直接调用 sort() 修改原始数组。关键在于：状态分离（排序字段、方向）、逻辑解耦（多字段优先级处理）、数据不可变（返回新数组）。
定义排序控制状态
用 ref 或 data 管理当前排序依据和顺序：
- 一个字符串变量记录主排序字段，如
sortKey = 'name' - 一个字符串变量记录升降序，如
sortOrder = 'asc' - 如需多字段（例如先按状态分组，再按时间倒序），可改用数组，如
sortRules = [{ key: 'status', order: 'asc' }, { key: 'createdAt', order: 'desc' }]
编写多条件排序的 computed 属性
不依赖外部库时，可用原生 Array.prototype.sort() 手动实现多级比较；推荐用 _.orderBy（Lodash）更简洁可靠：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 若用 Lodash：
computed(() => _.orderBy(items.value, ['status', 'createdAt'], ['asc', 'desc'])) - 若纯 JS：遍历
sortRules，对每对元素依次比较，任一字段不等就返回结果，全部相等才进入下一项 - 注意：始终基于原始数据副本排序，比如
[...items.value].sort(...)，避免污染响应式源数组
绑定点击事件触发排序切换
表头单元格加 @click 调用排序方法，支持单击切升序、再点切降序、换字段重置为升序：
立即学习“前端免费学习笔记（深入）”；
- 点击“姓名”列 → 设
sortKey = 'name'，sortOrder = 'asc' - 再次点击 → 若当前已是
name，则翻转sortOrder - 点击“状态”列 → 切换
sortKey = 'status'，并重置sortOrder = 'asc'
模板中使用排序后数据渲染表格
直接把计算属性名传给 v-for，无需额外方法调用：
<tr v-for="item in sortedItems" :key="item.id">- 确保
:key值稳定（推荐用唯一 ID，不用索引） - 排序状态变化时，
sortedItems自动重新求值，DOM 高效更新
