Quasar表格列排序异常：箭头方向不变且descending始终为false

核心问题根源 #

1. 初始化参数错误：你定义的pagination中sortBy值为'desc'，但这个字段的作用是指定按哪一列排序，应该传入列的field值（比如'id'），而非排序方向。错误的初始值导致表格无法正确识别排序字段，进而无法切换箭头方向。
2. 状态同步冲突：同时使用v-model:pagination和手动修改pagination属性，干扰了Quasar表格的内部状态管理——组件本应自动同步排序状态，但你在请求完成后手动覆盖descending等字段，打乱了状态更新逻辑。
3. 排序参数未完整传递：filter只传入了sortBy，没有带上descending状态，后端无法根据排序方向返回对应结果，也会让前端箭头状态看起来异常。

具体修复步骤 #

1. 修正pagination初始值

把sortBy改为实际的列字段名（比如默认按id排序）：

const pagination = ref({
    sortBy: 'id', // 替换为你的列field值，比如'id'/'name'等
    descending: false,
    page: 1,
    rowsPerPage: 10,
    rowsNumber: 0,
});

2. 调整onRequest函数，避免手动干扰状态同步

如果使用v-model:pagination，就不需要手动覆盖分页/排序属性，组件会自动同步：

function onRequest(props1) {
    const { page, rowsPerPage, sortBy, descending } = props1.pagination;
 
    // 把排序方向也传给后端filter
    filter.sortby = sortBy;
    filter.descending = descending;

    axios
        .get(route('clients.index'), {
            params: {
                page: page,
                rowsPerPage: rowsPerPage,
                filter: filter,
            },
        })
        .then(({ data }) => {
            localRows.value = [...data.data];
            // 只需要更新总条数，其他状态由v-model自动同步
            pagination.value.rowsNumber = data.total;
        })
}

3. 确保列配置支持排序

检查columns_wideview中需要排序的列，必须设置sortable: true：

// 示例列配置
const columns_wideview = [
    {
        name: 'id',
        label: 'ID',
        field: 'id',
        sortable: true // 开启列排序支持
    },
    // 其他列配置...
];

可选：改用单向绑定手动管理状态

如果想完全手动控制分页状态，可以把v-model:pagination改为单向绑定:pagination="pagination"，然后在onRequest开头同步所有状态：

<q-table
    :dense="isTableDense"
    v-model:selected="selected"
    :pagination="pagination" <!-- 替换为单向绑定 -->
    :columns="columns_wideview"
    :rows="localRows"
    :visible-columns="visibleColumns_wideView"
    @request="onRequest"
    row-key="id"
    selection="multiple"
    title="Ügyfelek"
    ref="tableRef"
    no-data-label="Nincs adat..."
    binary-state-sort
>

对应修改onRequest：

function onRequest(props1) {
    // 先同步所有分页/排序状态到本地
    pagination.value = { ...pagination.value, ...props1.pagination };
    
    const { page, rowsPerPage, sortBy, descending } = pagination.value;
 
    filter.sortby = sortBy;
    filter.descending = descending;

    axios
        .get(route('clients.index'), {
            params: {
                page: page,
                rowsPerPage: rowsPerPage,
                filter: filter,
            },
        })
        .then(({ data }) => {
            localRows.value = [...data.data];
            pagination.value.rowsNumber = data.total;
        })
}

内容的提问来源于stack exchange，提问作者Tamás László