当前位置：首页 > VUE

vue实现全选删除功能

2026-01-20 03:31:56VUE

实现全选删除功能

在Vue中实现全选删除功能通常涉及以下步骤：创建全选复选框、绑定数据、实现删除逻辑。以下是一个完整的实现示例。

数据准备

定义一个数据列表和全选状态变量：

vue实现全选删除功能

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

全选逻辑

实现全选复选框的绑定和逻辑：

methods: {
  toggleSelectAll() {
    this.items.forEach(item => {
      item.selected = this.selectAll
    })
  }
}

单个选择逻辑

实现单个项目的选择逻辑：

vue实现全选删除功能

methods: {
  toggleItemSelection(item) {
    item.selected = !item.selected
    this.selectAll = this.items.every(item => item.selected)
  }
}

删除选中项

实现删除选中项的功能：

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

模板部分

在模板中绑定上述逻辑：

<template>
  <div>
    <div>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
      <label>全选</label>
      <button @click="deleteSelected">删除选中</button>
    </div>

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

完整组件代码

<template>
  <div>
    <div>
      <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
      <label>全选</label>
      <button @click="deleteSelected">删除选中</button>
    </div>

    <ul>
      <li v-for="item in items" :key="item.id">
        <input 
          type="checkbox" 
          v-model="item.selected" 
          @change="toggleItemSelection(item)" 
        />
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </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 }
      ],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      this.items.forEach(item => {
        item.selected = this.selectAll
      })
    },
    toggleItemSelection(item) {
      item.selected = !item.selected
      this.selectAll = this.items.every(item => item.selected)
    },
    deleteSelected() {
      this.items = this.items.filter(item => !item.selected)
      this.selectAll = false
    }
  }
}
</script>