vue实现全选删除

Vue 实现全选删除功能

在 Vue 中实现全选删除功能需要结合复选框的全选状态管理和批量删除逻辑。以下是具体实现方法：

数据准备

定义需要展示的数据列表和选中状态数组

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItems: [],
    selectAll: false
  }
}

模板部分

实现全选复选框和单个项目复选框

<div>
  <input type="checkbox" v-model="selectAll" @change="toggleSelectAll"> 全选
  <ul>
    <li v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id" @change="updateSelectAll">
      {{ item.name }}
    </li>
  </ul>
  <button @click="deleteSelected" :disabled="selectedItems.length === 0">删除选中</button>
</div>

方法实现

处理全选逻辑和删除操作

methods: {
  toggleSelectAll() {
    this.selectedItems = this.selectAll 
      ? this.items.map(item => item.id) 
      : []
  },

  updateSelectAll() {
    this.selectAll = this.selectedItems.length === this.items.length
  },

  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = []
    this.selectAll = false
  }
}

关键点说明

• selectAll 作为全选复选框的绑定值
• selectedItems 数组存储被选中的项目ID
• toggleSelectAll 方法处理全选/取消全选逻辑
• updateSelectAll 在单个选项变化时检查是否需要更新全选状态
• deleteSelected 方法过滤掉被选中的项目

优化建议

• 添加 loading 状态防止重复提交
• 增加确认对话框避免误删
• 对于大量数据考虑分页处理
• 使用计算属性优化性能

这种方法适用于大多数需要批量操作的场景，可以根据实际需求调整数据结构和方法逻辑。