使用v-data-table选中行时如何仅获取选中行的id而非完整行数据

v-data-table 绑定的selected变量默认返回选中行的完整对象数组，你可以通过计算属性的方式快速得到仅包含id的数组，无需修改原有表格组件的配置：

步骤1：保留原有表格配置不变 #

你的v-data-table代码不需要调整：

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

步骤2：新增计算属性提取id #

在script部分新增计算属性，实时映射选中项的id值：

// Vue2 写法
computed: {
  selectedIds() {
    return this.selected.map(item => item.id)
  }
}

// Vue3 组合式API写法
const selectedIds = computed(() => selected.value.map(item => item.id))

后续需要使用选中id的场景直接调用selectedIds即可，返回格式就是你需要的[2]这种id数组，单选、多选场景都适用。

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