VueJS 3 + Vuetify单选择策略下如何获取选中数据？

你的问题出在子组件MyTableAnnuaire没有实现v-model:selected的双向绑定机制，父组件add.vue传递了selectedItems，但子组件没有把表格的选中状态同步回父组件。以下是具体修复步骤：

1. 补全MyTableAnnuaire.vue的逻辑 #

在MyTableAnnuaire.vue中添加响应式变量、props接收和事件发射逻辑，实现双向绑定：

<script setup>
import { ref, computed, watch } from 'vue'

// 接收父组件传递的参数
const props = defineProps({
  headers: {
    type: Array,
    required: true
  },
  items: {
    type: Array,
    required: true
  },
  selected: {
    type: Object, // 因为select-strategy是single，所以是单个对象；如果是多选则改成Array
    default: null
  }
})

// 定义更新事件
const emit = defineEmits(['update:selected'])

const searchTerm = ref('')

// 过滤逻辑（根据实际需求调整字段匹配规则）
const filteredItems = computed(() => {
  if (!searchTerm.value) return props.items
  return props.items.filter(item => 
    Object.values(item).some(val => 
      val?.toString().toLowerCase().includes(searchTerm.value.toLowerCase())
    )
  )
})

// 本地维护选中状态，绑定到表格
const localSelected = ref(props.selected)

// 监听本地选中变化，同步给父组件
watch(localSelected, (newVal) => {
  emit('update:selected', newVal)
}, { deep: true })

// 监听父组件传递的selected变化，同步到本地
watch(() => props.selected, (newVal) => {
  localSelected.value = newVal
})
</script>

2. 给v-data-table绑定选中状态 #

修改MyTableAnnuaire.vue中的v-data-table标签，添加v-model:selected="localSelected"：

<v-data-table class="blue-header" :headers="headers" :items="filteredItems" density="compact" hover="true"
  no-data-text="Pas de données disponibles" :fixed-header="true" :items-per-page="-1" :height="250"
  item-value="clcode" select-strategy="single" show-select
  hide-default-footer
  v-model:selected="localSelected"> <!-- 新增这行 -->
</v-data-table>

3. 确认父组件变量类型 #

因为你的表格设置了select-strategy="single"（单选），所以add.vue中的selectedItems应该定义为单个对象类型，而不是数组：

<script setup>
import { ref } from 'vue'
import MyTableAnnuaire from './MyTableAnnuaire.vue'

const selectedItems = ref(null) // 单选用null/单个对象；多选则用ref([])
// ... 其他逻辑（headers、list的定义）
</script>

这样修改后，勾选表格中的复选框时，选中的内容就会同步到add.vue的selectedItems变量中了。

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