Vuetify数据表格中复选框列无法排序问题求助

要实现复选框列的排序（将选中行移至开头/末尾），核心是给复选框列自定义排序逻辑——默认的复选框列不关联数据项属性，无法自动触发排序。

实现步骤 #

1. 开启列排序并自定义逻辑
   在表头配置中给复选框列设置sortable: true，同时编写sort函数，基于行的选中状态（是否在绑定的选中数组内）判断排序优先级。

2. 控制排序方向
   通过sort函数的返回值控制选中行的位置：

   • 返回-1让选中行排在未选中行前
   • 返回1让选中行排在未选中行后

3. （可选）选中状态变化时自动排序
   监听选中数组的变化，触发表格重新排序，确保选中后立即调整行位置。

代码示例 #

基础手动排序（点击列头触发） #

<template>
  <v-data-table
    ref="dataTable"
    :headers="headers"
    :items="items"
    v-model:selected="selectedIds"
    item-value="id"
  >
    <template v-slot:header.checkbox="{ props }">
      <v-checkbox
        v-model="props.all"
        :indeterminate="props.indeterminate"
        @click="props.toggleAll"
      />
    </template>
  </v-data-table>
</template>

<script setup>
import { ref } from 'vue'

const selectedIds = ref([])
const items = ref([
  { id: 1, name: '项目1' },
  { id: 2, name: '项目2' },
  { id: 3, name: '项目3' }
])

const headers = [
  {
    text: '',
    value: 'checkbox',
    sortable: true,
    // 选中行移至开头的排序逻辑
    sort: (a, b) => {
      const aChecked = selectedIds.value.includes(a.id)
      const bChecked = selectedIds.value.includes(b.id)
      if (aChecked && !bChecked) return -1
      if (!aChecked && bChecked) return 1
      return 0
    }
  },
  { text: '名称', value: 'name', sortable: true }
]
</script>

自动排序（选中后立即调整位置） #

在上述代码基础上添加监听逻辑：

import { watch } from 'vue'

const dataTable = ref(null)

watch(selectedIds, () => {
  // 保留当前排序方向，避免切换排序逻辑
  const currentSort = dataTable.value?.sortBy?.includes('checkbox') 
    ? dataTable.value.sortDesc ? 'desc' : 'asc'
    : 'asc'
  dataTable.value.sort('checkbox', currentSort)
})

调整排序方向 #

若需要将选中行移至末尾，只需修改sort函数的返回值：

sort: (a, b) => {
  const aChecked = selectedIds.value.includes(a.id)
  const bChecked = selectedIds.value.includes(b.id)
  if (aChecked && !bChecked) return 1
  if (!aChecked && bChecked) return -1
  return 0
}

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