如何保存Quasar Table排序状态，返回时恢复原排序？

获取排序数据 #

不需要自定义表头点击逻辑，Quasar Table 原生支持通过双向绑定属性追踪排序状态：

• 使用 v-model:sort 绑定当前排序的列名，v-model:sort-direction 绑定排序方向（asc/desc）；旧版本 Quasar 可改用 v-model:sort-by 和 v-model:sort-desc（布尔值，true 表示降序）。
• 绑定后的响应式变量会自动同步表头点击产生的排序变化，直接拿这些变量的值就能获取当前排序数据。

示例代码片段：

<q-table
  :rows="tableData"
  :columns="columns"
  v-model:sort="currentSortCol"
  v-model:sort-direction="currentSortDir"
  row-key="id"
/>

保存与恢复排序状态 #

1. 保存状态：在用户跳转离开「全部条目表」页面时（比如组件销毁前的 onBeforeUnmount 钩子），把排序相关的变量值存入本地存储（如 localStorage）或全局状态管理（Vuex/Pinia）。
2. 恢复状态：进入「全部条目表」页面时（组件挂载的 onMounted 钩子），读取之前保存的排序数据，赋值给对应的响应式变量，Quasar Table 会自动恢复排序状态。

完整示例：

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 排序状态变量
const currentSortCol = ref('')
const currentSortDir = ref('asc')
// 表格数据与列配置
const tableData = ref([])
const columns = ref([
  { name: 'id', label: 'ID', sortable: true },
  { name: 'name', label: '名称', sortable: true }
])

// 页面挂载时恢复排序
onMounted(() => {
  const savedCol = localStorage.getItem('entryTableSortCol')
  const savedDir = localStorage.getItem('entryTableSortDir')
  if (savedCol) currentSortCol.value = savedCol
  if (savedDir) currentSortDir.value = savedDir
})

// 页面离开时保存排序
onBeforeUnmount(() => {
  localStorage.setItem('entryTableSortCol', currentSortCol.value)
  localStorage.setItem('entryTableSortDir', currentSortDir.value)
})
</script>

<template>
  <q-table
    :rows="tableData"
    :columns="columns"
    v-model:sort="currentSortCol"
    v-model:sort-direction="currentSortDir"
    row-key="id"
  />
</template>

关于表头点击 #

完全不需要自定义表头点击代码，Quasar Table 自带的表头交互逻辑会自动更新你绑定的排序变量，只需要做好状态的绑定、保存和读取即可。

内容的提问来源于stack exchange，提问作者Morgan Hayes