当前位置：首页 > VUE

vue 多选框实现删除

2026-02-23 14:40:24VUE

Vue 多选框实现删除功能

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

数据绑定与多选框状态管理

使用 v-model 绑定多选框组到数组，存储选中项的 ID 或索引：

vue 多选框实现删除

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

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

删除逻辑实现

通过过滤原始数组实现删除，保留未选中的项：

vue 多选框实现删除

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

完整组件示例

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      selectedItems: []
    }
  },
  methods: {
    deleteSelected() {
      this.items = this.items.filter(
        item => !this.selectedItems.includes(item.id)
      )
      this.selectedItems = []
    }
  }
}
</script>

增强功能建议

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

methods: {
  toggleAll() {
    if (this.selectedItems.length === this.items.length) {
      this.selectedItems = []
    } else {
      this.selectedItems = this.items.map(item => item.id)
    }
  }
}