如何在Vuetify数据表中获取选中行ID并实现批量删除

需求：在Vuetify数据表中，用户选中任意数量记录（或全选）时显示删除按钮，点击按钮删除选中的记录；目前无法获取选中行的ID，现有代码如下，寻求解决办法。

问题根源 #

你的代码中item-key="name"是核心问题——item-key需要绑定数据中唯一标识字段（这里是id），否则选中的对象无法正确关联数据行；另外selected数组本身就包含完整的行对象，直接就能提取id。

解决方案步骤 #

• 修正item-key为id，确保选中项与数据行正确绑定
• 简化删除按钮显示逻辑，直接通过selected.length > 0控制显示
• 添加批量删除方法，通过选中项的id过滤数据源
• 移除冗余的selectAll方法，选中状态自动同步到selected数组

修改后的完整代码 #

模板部分

<v-btn v-show="selected.length > 0" color="danger white--text" @click="deleteSelected">
  <v-icon>mdi-delete</v-icon>
</v-btn>
<v-data-table
  fixed-header
  v-model="selected"
  @input="handleSelect"
  :headers="headers"
  :items="company"
  :single-select="singleSelect"
  item-key="id"
  show-select
  class="elevation-1"
  checkbox-color="red"
>
  <template v-slot:item.option="props">
    <v-icon class="mx-1" fab dark color="success darken-3" @click="onButtonClick(props.item)">mdi-circle-edit-outline</v-icon>
    <v-icon class="mx-1" fab dark color="danger" @click="deleteSingle(props.item)">mdi-delete-outline</v-icon>
  </template>
</v-data-table>

脚本部分

export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    headers: [
      {
        text: '公司名称',
        align: 'start',
        sortable: false,
        value: 'name',
      },
      { text: '邮箱', value: 'email' },
      { text: '联系电话', value: 'contact' },
      { text: '国家', value: 'country' },
      { text: '母公司', value: 'parent' },
      { text: '操作', value: 'option' },
    ],
    company: [
      {
        id: 1,
        name: '正义联盟',
        email: 'JusticeLeague@wayne.com',
        contact: '01287(7643)',
        country: '大都会',
        parent: '韦恩工业',
      },
      {
        id: 2,
        name: '少年泰坦',
        email: 'teentitans@wayne.com',
        contact: '01287(7643)',
        country: '大都会',
        parent: '韦恩工业',
      },
      {
        id: 3,
        name: '泰坦',
        email: 'titans@wayne.com',
        contact: '01287(7643)',
        country: '中心城',
        parent: '韦恩工业',
      },
      {
        id: 4,
        name: '闪电队',
        email: 'flash@teamFlash.com',
        contact: '01287(7643)',
        country: '中心城',
        parent: '-',
      },
      {
        id: 5,
        name: '超女队',
        email: 'supergirl@green.com',
        contact: '01287(7643)',
        country: '中心城',
        parent: '超人',
      },
      {
        id: 6,
        name: '超女',
        email: 'supergirl@green.com',
        contact: '01287(7643)',
        country: '中心城',
        parent: '超人',
      },
    ],
  }),
  methods: {
    // 单行删除
    deleteSingle(item) {
      this.company = this.company.filter(company => company.id !== item.id);
      this.selected = this.selected.filter(selected => selected.id !== item.id);
    },
    // 批量删除选中项
    deleteSelected() {
      const selectedIds = this.selected.map(item => item.id);
      this.company = this.company.filter(company => !selectedIds.includes(company.id));
      this.selected = [];
    },
    // 选中事件处理
    handleSelect() {
      console.log('选中的ID:', this.selected.map(item => item.id));
    },
    onButtonClick(tr) {
      console.log('编辑行ID:', tr.id);
    },
  },
};

关键说明 #

• item-key="id"：确保每一行的唯一标识，让选中状态与数据正确关联
• v-show="selected.length > 0"：只要有选中项就显示删除按钮，无需额外维护状态
• deleteSelected方法：通过选中项的id过滤数据源，实现批量删除并清空选中状态
• 单行删除时同步更新selected数组，避免选中状态残留

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