当前位置：首页 > VUE

vue实现多选删除

2026-03-10 02:56:05VUE

Vue 实现多选删除功能

在 Vue 中实现多选删除功能通常涉及以下几个关键步骤：

数据绑定与多选状态管理

创建数据列表和选中状态数组，使用 v-model 绑定复选框：

vue实现多选删除

<template>
  <div v-for="(item, index) in items" :key="item.id">
    <input type="checkbox" v-model="selectedItems" :value="item.id">
    {{ item.name }}
  </div>
  <button @click="deleteSelected">删除选中项</button>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      selectedItems: []
    }
  }
}
</script>

删除逻辑实现

通过过滤原始数组实现删除操作：

methods: {
  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = [] // 清空选中状态
  }
}

表格场景的优化实现

当数据以表格形式展示时，可结合 el-table（Element UI）实现：

vue实现多选删除

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="名称"></el-table-column>
</el-table>

<el-button @click="batchDelete">批量删除</el-button>

data() {
  return {
    tableData: [...],
    multipleSelection: []
  }
},
methods: {
  handleSelectionChange(val) {
    this.multipleSelection = val
  },
  batchDelete() {
    const ids = this.multipleSelection.map(item => item.id)
    this.tableData = this.tableData.filter(
      item => !ids.includes(item.id)
    )
  }
}

全选功能扩展

添加全选/反选功能提升用户体验：

<input type="checkbox" @change="toggleAll" :checked="isAllSelected">
<span>全选</span>

computed: {
  isAllSelected() {
    return this.selectedItems.length === this.items.length
  }
},
methods: {
  toggleAll(e) {
    this.selectedItems = e.target.checked
      ? this.items.map(item => item.id)
      : []
  }
}

后端交互处理

实际项目中通常需要调用API进行删除：

async batchDelete() {
  try {
    await api.deleteItems(this.selectedItems)
    this.fetchData() // 重新获取数据
    this.selectedItems = []
  } catch (error) {
    console.error('删除失败', error)
  }
}