当前位置：首页 > VUE

实现多选删除vue

2026-01-19 12:59:19VUE

实现多选删除功能（Vue）

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

数据绑定与选择状态管理

创建一个数组存储可选择的数据项，并为每个项添加选中状态属性。例如：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', selected: false },
      { id: 2, name: 'Item 2', selected: false },
      // 更多项...
    ]
  }
}

渲染多选列表

使用v-for渲染列表，配合v-model绑定选中状态：

<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="item.selected">
  <span>{{ item.name }}</span>
</div>

删除选中项逻辑

通过计算属性或方法筛选出选中项并删除：

methods: {
  deleteSelected() {
    this.items = this.items.filter(item => !item.selected)
  }
}

完整示例代码

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(item => !item.selected)
    }
  }
}
</script>

增强版实现（支持全选/反选）

添加全选功能

增加全选复选框和对应逻辑：

<input type="checkbox" v-model="selectAll" @change="toggleAll">
<span>全选</span>

computed: {
  selectAll: {
    get() {
      return this.items.every(item => item.selected)
    },
    set(value) {
      this.items.forEach(item => item.selected = value)
    }
  }
},
methods: {
  toggleAll() {
    this.selectAll = !this.selectAll
  }
}

与后端API交互

实际项目中通常需要调用API删除数据：

async deleteSelected() {
  const selectedIds = this.items
    .filter(item => item.selected)
    .map(item => item.id)

  try {
    await axios.delete('/api/items', { data: { ids: selectedIds } })
    this.items = this.items.filter(item => !item.selected)
  } catch (error) {
    console.error('删除失败', error)
  }
}

使用第三方组件库（如Element UI）

若使用UI库，可以简化实现：

<el-checkbox-group v-model="selectedItems">
  <el-checkbox v-for="item in items" :key="item.id" :label="item.id">
    {{ item.name }}
  </el-checkbox>
</el-checkbox-group>
<el-button @click="deleteSelected">删除</el-button>

data() {
  return {
    items: [...],
    selectedItems: []
  }
},
methods: {
  deleteSelected() {
    this.items = this.items.filter(item => !this.selectedItems.includes(item.id))
    this.selectedItems = []
  }
}

实现多选删除vue