v-data-table复选框异常：点击单个全选且表头复选框缺失

问题现象 #

启用show-select后出现两个异常：

• 点击任意一行的复选框，所有行的复选框都会被选中
• 表头的全选复选框缺失
• 预期行为：点击单个复选框仅选中对应条目

相关代码实现 #

数据表格代码 #

<v-data-table
    v-model="selected_available_units"
    show-select
    select-strategy="single"
    :headers="new_unit_table_headers"
    :items="unitsStore.available_units_flattened"
    item-key="unit_id"
  >
  <template #item.unit_width="{ item }">
    <div>{{ get_unit_size(item) }}</div>
  </template>
  <template #item.unit_basis_price="{ item }">
    <div>{{ fmt.currency(item.unit_basis_price, item.unit_currency as CURRENCY) }}</div>
  </template>
</v-data-table>

数据类型定义 #

export type UnitFlattened = {
  unit_id: string,
  unit_name: string,
  unit_width: number,
  unit_depth: number,
  unit_height: number,
  unit_basis_price: number,
  unit_uom: string,
  unit_currency: string,
  unit_is_available: boolean,
  building_name: string,
  location_name: string,
  building_id: string,
  location_id: string,
  company_id: string
}

表头定义 #

const new_unit_table_headers : ReadonlyHeaders = [
  {title: 'Location', align: 'start', key: 'location_name'},
  {title: 'Building', align: 'start', key: 'building_name'},
  {title: 'Name', align: 'start', key: 'unit_name'},
  {title: 'Size', align: 'end', key: 'unit_width'},
  {title: 'Basis', align: 'end', key: 'unit_basis_price'}
  // {title: '', align: '', key: ''},
]

问题修复方案 #

1. 全选复选框缺失的处理 #

select-strategy="single"是单选模式，Vuetify默认会隐藏表头全选框（单选场景下全选逻辑不成立）。如果需要多选功能，将select-strategy改为"multiple"即可显示全选复选框。

2. 点击单个复选框全选所有行的修复 #

这个问题核心是v-model绑定的selected_available_units类型与select-strategy不匹配：

• 若使用select-strategy="single"（单选），selected_available_units必须是单个对象或null，不能是数组。如果初始化为数组，点击复选框时框架会错误地将所有行数据推入数组，导致所有复选框被选中。
• 若需要多选，将select-strategy改为"multiple"，同时确保selected_available_units初始化为空数组。

代码修改示例：

• 单选场景：

  // 初始化选中项为单个对象或null
  const selected_available_units = ref<UnitFlattened | null>(null)
  

  组件保持select-strategy="single"

• 多选场景：

  // 初始化选中项为空数组
  const selected_available_units = ref<UnitFlattened[]>([])
  

  组件修改为select-strategy="multiple"

另外，item-key="unit_id"配置正确（UnitFlattened类型包含唯一标识unit_id），无需调整。

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