Vue3中Vuetify的v-datatable行选择实现求助

1. 带复选框的批量行选择 #

这是最常用的行选择方式，v-datatable内置show-select属性可快速启用：

<template>
  <v-data-table
    :items="items"
    :headers="headers"
    show-select
    v-model:selected="selectedItems"
    item-key="id"
  >
  </v-data-table>
</template>

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

// 模拟业务数据
const items = ref([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
])

// 表头配置
const headers = ref([
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' }
])

// 存储选中的行数据
const selectedItems = ref([])
</script>

• show-select：自动在表头添加全选复选框，每行开头添加单选框
• v-model:selected：绑定选中行的数组
• item-key：必须指定数据的唯一标识字段（如id）

2. 单选模式 #

若需限制只能选中一行，添加single-select属性即可：

<v-data-table
  :items="items"
  :headers="headers"
  show-select
  single-select
  v-model:selected="selectedItem"
  item-key="id"
>
</v-data-table>

对应脚本中修改绑定值为单个对象：

const selectedItem = ref(null)

3. 点击整行触发选中 #

如果需要点击整行就切换选中状态（无需点击复选框），绑定click:row事件手动控制：

<template>
  <v-data-table
    :items="items"
    :headers="headers"
    show-select
    :selected="selectedItems"
    @click:row="handleRowClick"
    item-key="id"
  >
  </v-data-table>
</template>

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

const items = ref([/* 数据同上 */])
const headers = ref([/* 表头同上 */])
const selectedItems = ref([])

const handleRowClick = (item) => {
  // 切换当前行的选中状态
  const idx = selectedItems.value.findIndex(i => i.id === item.id)
  idx > -1 ? selectedItems.value.splice(idx, 1) : selectedItems.value.push(item)
}
</script>

单选模式下的行点击逻辑：

const selectedItem = ref(null)
const handleRowClick = (item) => {
  selectedItem.value = selectedItem.value?.id === item.id ? null : item
}

4. 自定义选中行样式（可选） #

如需修改默认选中行样式，通过深度选择器覆盖Vuetify样式：

<style scoped>
:deep(.v-data-table__selected) {
  background-color: #e3f2fd !important; /* 自定义选中背景色 */
}
</style>

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