Vue3+Vuetify3自定义VDataTable排序指示器不显示问题

问题场景 #

将项目从Vue 2迁移至Vue 3并升级Vuetify到最新版本后，使用Vuetify Labs的VDataTable组件时，表格功能正常，但表头的排序指示器无法默认显示。

问题原因 #

Vuetify 3 Labs版本的VDataTable排序参数格式与Vue 2版本不同，你当前使用的sortBy格式不符合组件要求，且两个表格共用同一排序参数也不符合订单簿的业务逻辑（Asks通常默认升序，Bids默认降序）。

解决方案 #

1. 拆分排序参数，修正格式 #

在组件的data中，将共用的sortBy替换为表格各自的排序字段和方向：

data: function() {
  return {
    // ... 其他数据
    // 替换原有的sortBy配置
    asksSortBy: ['price'],
    asksSortDesc: [false], // Asks表格默认按价格升序
    bidsSortBy: ['price'],
    bidsSortDesc: [true],  // Bids表格默认按价格降序
    // ... 表头配置不变
  }
}

2. 更新表格组件的绑定参数 #

分别为Asks和Bids表格绑定对应的排序参数，并统一分页禁用的写法：

Asks表格修改：

<v-data-table
  dense
  :sort-by="asksSortBy"
  :sort-desc="asksSortDesc"
  :headers="asksHeaders"
  :items="marketdata.asks"
  :rows-per-page="-1"
  :disable-pagination="true" <!-- 替换原options="disablePagination" -->
  class="elevation-1"
>

Bids表格修改：

<v-data-table
  dense
  :sort-by="bidsSortBy"
  :sort-desc="bidsSortDesc"
  :disable-pagination="true"
  :headers="bidsHeaders"
  :items="marketdata.bids"
  :items-per-page="-1"
>

3. 确认表头可排序配置 #

确保表头中需要排序的字段已设置sortable: true，你的现有配置中asksHeaders和bidsHeaders的price字段已满足该要求，无需修改。

完成以上修改后，表头的默认排序指示器即可正常显示，同时符合订单簿的默认排序逻辑。

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