当前位置：首页 > VUE

vue实现全选删除功能

2026-02-20 19:34:27VUE

实现全选删除功能的步骤

数据绑定与全选逻辑

在Vue组件中定义数据模型，包括一个数组items存储列表数据，一个数组selectedItems存储选中的项，以及一个布尔值selectAll控制全选状态。

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

全选切换方法

创建toggleSelectAll方法处理全选逻辑，当selectAll为true时将items中所有项的ID加入selectedItems，否则清空selectedItems。

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

单项选择处理

添加toggleItemSelection方法处理单个项目的选择状态，使用includes检查项目是否已选中，并更新selectedItems数组。

toggleItemSelection(itemId) {
  const index = this.selectedItems.indexOf(itemId)
  if (index === -1) {
    this.selectedItems.push(itemId)
  } else {
    this.selectedItems.splice(index, 1)
  }
  this.selectAll = this.selectedItems.length === this.items.length
}

删除选中项功能

实现deleteSelected方法，通过filter保留未选中的项目，并重置选择状态。

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

模板实现

在模板中使用v-model绑定全选复选框，v-for渲染项目列表，并为每个项目添加选择复选框。

<template>
  <div>
    <label>
      <input 
        type="checkbox" 
        v-model="selectAll" 
        @change="toggleSelectAll"
      />
      全选
    </label>

    <ul>
      <li v-for="item in items" :key="item.id">
        <input
          type="checkbox"
          :value="item.id"
          v-model="selectedItems"
          @change="toggleItemSelection(item.id)"
        />
        {{ item.name }}
      </li>
    </ul>

    <button 
      @click="deleteSelected" 
      :disabled="!selectedItems.length"
    >
      删除选中项
    </button>
  </div>
</template>

样式优化

添加CSS样式增强交互体验，如禁用状态按钮的样式和选中项的高亮效果。

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

li {
  padding: 8px;
  margin: 4px 0;
}

li:hover {
  background-color: #f5f5f5;
}

计算属性优化

使用计算属性isAllSelected动态判断是否全选，替代手动维护selectAll状态。

computed: {
  isAllSelected: {
    get() {
      return this.selectedItems.length === this.items.length && this.items.length > 0
    },
    set(value) {
      this.selectedItems = value ? this.items.map(item => item.id) : []
    }
  }
}

vue实现全选删除功能