Vuetify中点击v-data-table整行实现复选框选中的问题及解决方案咨询

我之前也碰到过一模一样的情况，直接修改slot.isSelected确实会出现「控制台显示选中但UI不更新」的问题——这是因为你绕开了组件的受控状态绑定，Vue的响应式系统根本没捕捉到这个变化。下面给你两种靠谱的解决方式：

方法一：操作v-model绑定的选中数组（推荐） #

你的表格用了v-model="selected"，这才是组件追踪选中状态的核心。我们只需要在点击行时手动更新这个数组，UI就会自动同步复选框的状态：

模板代码 #

<v-data-table
  v-model="selected"
  item-key="userNumber"
  class="fixed-table-users"
  :search="search"
  hide-default-footer
  hide-default-header
  single-select
  :items="users"
  :headers="headers"
  disable-pagination
  show-select
  @click:row="handleRowSelect"
></v-data-table>

脚本逻辑 #

export default {
  data() {
    return {
      selected: [],
      // 你的其他数据：users、headers等
    }
  },
  methods: {
    handleRowSelect(item) {
      // 因为是single-select模式，先判断当前行是否已选中
      const isAlreadySelected = this.selected.some(
        selectedItem => selectedItem.userNumber === item.userNumber
      );
      // 切换选中状态：已选中就清空数组，未选中就添加当前行
      this.selected = isAlreadySelected ? [] : [item];
    }
  }
}

方法二：利用组件内置的toggleSelect方法（进阶） #

Vuetify的v-data-table实例提供了toggleSelect方法，直接调用它就能切换行的选中状态，这种方式更贴合组件内部逻辑：

模板代码（给表格添加ref标识） #

<v-data-table
  ref="userTable"
  v-model="selected"
  item-key="userNumber"
  class="fixed-table-users"
  :search="search"
  hide-default-footer
  hide-default-header
  single-select
  :items="users"
  :headers="headers"
  disable-pagination
  show-select
  @click:row="handleRowSelect"
></v-data-table>

脚本逻辑 #

export default {
  // ... 其他数据定义
  methods: {
    handleRowSelect(item) {
      // 调用组件内置方法切换选中状态
      this.$refs.userTable.toggleSelect(item);
    }
  }
}

为什么之前的方法无效？ #

你直接修改slot.isSelected只是改变了组件内部的临时状态，并没有同步到v-model绑定的selected数组。Vuetify的v-data-table是受控组件，它的选中状态完全由v-model决定——只有当selected数组发生变化时，组件才会触发UI更新。

这两种方法都能完美实现「点击行任意位置选中/取消选中」的需求，同时保证复选框状态和选中数组完全同步，还兼容原生的复选框点击操作。

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