Quasar中分页q-table如何实现仅对当前页表格行排序

q-table 组件默认的排序逻辑是针对绑定到 rows 属性的全量数据执行，排序完成后再按照分页规则切分对应页数据渲染，没有提供直接的配置项切换为「仅排序当前页行」的模式，可通过以下两种方案实现需求：

• 方案1：受控分页下仅传入当前页数据切片（推荐，实现成本最低）
  不要将全量表格数据直接绑定给 q-table 的 rows 属性，改为手动维护分页状态，提前从全量数据中切出当前页对应的数据片段，仅将该片段传入组件。此时组件内置的排序逻辑只会作用于接收到的当前页数据，不会改动全量数据的顺序。
  示例代码：

  <template>
    <q-table
      :rows="currentPageRows"
      :columns="tableColumns"
      :pagination="paginationState"
      row-key="id"
      @update:pagination="val => paginationState = val"
    />
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  // 全量原始表格数据
  const fullTableData = ref([])
  // 手动维护的分页状态
  const paginationState = ref({
    page: 1,
    rowsPerPage: 10,
    sortBy: '',
    descending: false
  })
  // 计算得到当前页需要渲染的数据切片
  const currentPageRows = computed(() => {
    const { page, rowsPerPage } = paginationState.value
    const start = (page - 1) * rowsPerPage
    const end = start + rowsPerPage
    return fullTableData.value.slice(start, end)
  })
  </script>
  

  注意：该方案必须使用受控分页模式，不要使用组件自带的非受控自动分页，翻页时组件会自动更新paginationState，计算属性会同步切出对应页的原始数据，排序行为仅作用在当前页切片内。

• 方案2：拦截内置排序事件，自定义当前页排序逻辑
  如果必须将全量数据绑定给rows属性，可以通过监听@sort事件拦截组件的默认全量排序逻辑，手动获取当前页数据切片完成排序后，强制组件按自定义排序结果渲染。
  该方案需要额外处理排序状态同步、排序后行数据映射的逻辑，复杂度高于方案1，适合有特殊全量数据绑定需求的场景。

常规交互逻辑下，表格排序默认作用于全量数据是符合多数用户预期的行为，如果要改为仅当前页排序，建议在列头排序旁增加明确提示，避免使用者误以为排序是针对全表生效。

内容的提问来源于stack exchange，提问作者nesrine-bn