当前位置：首页 > VUE

vue怎么实现选中删除

2026-02-25 19:18:08VUE

实现选中删除功能

在Vue中实现选中删除功能通常需要结合复选框或单选按钮与数据绑定。以下是实现步骤：

数据绑定与复选框

创建一个数组来存储选中的项ID，使用v-model绑定复选框：

vue怎么实现选中删除

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

删除方法实现

在methods中定义删除方法，过滤掉选中的项：

vue怎么实现选中删除

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

批量删除优化

对于大量数据，建议使用ID集合进行后端删除：

methods: {
  async deleteSelected() {
    if (this.selectedItems.length === 0) return

    try {
      await axios.delete('/api/items', { data: { ids: this.selectedItems } })
      this.items = this.items.filter(item => 
        !this.selectedItems.includes(item.id)
      )
      this.selectedItems = []
    } catch (error) {
      console.error('删除失败', error)
    }
  }
}

全选功能扩展

添加全选复选框提升用户体验：

<input type="checkbox" v-model="selectAll" @change="toggleAll">

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

标签: vue