Vue2迁移至Vue3后Vuetify V-Data-Table排序图标缺失问题咨询

问题描述 #

将Vue2项目升级至Vue3并同步升级Vuetify框架后，修改了V-Data-Table组件适配新的表头布局，同时配置禁用了分页功能。目前表格功能正常，但排序图标无法像旧版本那样显示，不过排序功能本身可正常工作。

问题原因 #

自定义了表头的column插槽，覆盖了Vuetify默认的表头渲染逻辑，导致默认的排序图标未被渲染。

修复方案 #

方案一：手动在自定义表头插槽中添加排序图标

在每个自定义column插槽中，引入排序状态变量和触发方法，手动渲染排序图标：

<!-- 以Asks表格的price列为例 -->
<template v-slot:column.price="{ header, toggleSort, isSorted, sortOrder }">
  <span @click="toggleSort" style="cursor: pointer;">
    Price ({{wallets.rel.ticker }})
    <v-icon v-if="isSorted" small>
      {{ sortOrder === 'asc' ? 'mdi-arrow-up' : 'mdi-arrow-down' }}
    </v-icon>
    <v-icon v-else small>mdi-unfold-more</v-icon>
  </span>
</template>

• toggleSort：Vuetify提供的排序切换触发方法
• isSorted：标记当前列是否处于排序状态
• sortOrder：当前排序方向（asc升序 / desc降序）

方案二：复用Vuetify内置表头组件

使用Vuetify的v-data-table-header组件，既保留自定义文本，又自动继承默认排序图标逻辑：

<!-- 以Bids表格的price列为例 -->
<template v-slot:column.price="{ header, props }">
  <v-data-table-header v-bind="props">
    Price ({{wallets.rel.ticker }})
  </v-data-table-header>
</template>

额外优化点 #

1. 修正sortBy格式：
   Vuetify3中sort-by的字段名无需方括号，修改data中的配置：

sortBy: [{ key: 'price', order: 'desc' }]

2. 统一分页禁用配置：
   两个表格分别使用了options="disablePagination"和:disable-pagination="true"，统一使用:disable-pagination="true"即可，同时可移除rows-per-page="-1"/items-per-page="-1"，因为禁用分页后会自动显示所有数据。

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