vue实现多选删除

实现多选删除功能

在Vue中实现多选删除功能通常涉及以下几个关键步骤：数据绑定、选择状态管理、删除逻辑处理。以下是具体实现方法：

数据准备与渲染

创建包含选择状态的数据结构，通常是一个对象数组，每个对象包含数据本身和一个选中状态标识：

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

在模板中使用v-for渲染列表，并为每个项目添加复选框：

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

选择状态管理

添加全选/取消全选功能，方便批量操作：

methods: {
  toggleAll(checked) {
    this.items.forEach(item => {
      item.selected = checked
    })
  }
}

在模板中添加全选复选框：

<input type="checkbox" @change="toggleAll($event.target.checked)">
全选

删除选中项

实现删除方法，过滤出已选中的项目并移除：

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

添加删除按钮并绑定该方法：

<button @click="deleteSelected">删除选中项</button>

完整示例代码

<template>
  <div>
    <div>
      <input type="checkbox" @change="toggleAll($event.target.checked)">
      全选
      <button @click="deleteSelected">删除选中项</button>
    </div>

    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="item.selected">
      {{ item.name }}
    </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: {
    toggleAll(checked) {
      this.items.forEach(item => {
        item.selected = checked
      })
    },
    deleteSelected() {
      this.items = this.items.filter(item => !item.selected)
    }
  }
}
</script>

增强功能建议

对于实际项目，可以考虑以下增强功能：

添加确认对话框防止误删：

deleteSelected() {
  if(confirm('确定要删除选中项吗？')) {
    this.items = this.items.filter(item => !item.selected)
  }
}

添加无选中项时的提示：

deleteSelected() {
  if(!this.items.some(item => item.selected)) {
    alert('请至少选择一项')
    return
  }
  // 删除逻辑...
}

使用计算属性显示选中数量：

computed: {
  selectedCount() {
    return this.items.filter(item => item.selected).length
  }
}

在模板中显示：

<button @click="deleteSelected">删除选中项 ({{ selectedCount }})</button>

这些方法可以根据实际项目需求进行组合和调整，构建出符合业务场景的多选删除功能。