当前位置：首页 > VUE

vue实现选中删除

2026-01-18 13:24:56VUE

实现选中删除功能

在Vue中实现选中删除功能通常涉及以下关键步骤：

数据绑定与列表渲染

使用v-for指令渲染列表数据，并为每个项添加复选框：

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

数据定义

在组件中定义必要的数据属性：

data() {
  return {
    items: [
      { id: 1, name: '项目1' },
      { id: 2, name: '项目2' },
      { id: 3, name: '项目3' }
    ],
    selectedItems: []
  }
}

删除逻辑实现

创建删除方法处理选中项的删除：

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

完整组件示例

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

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

增强功能

添加全选/取消全选功能：

<input 
  type="checkbox" 
  v-model="selectAll"
  @change="toggleAll"
>
<span>全选</span>

<script>
methods: {
  toggleAll() {
    this.selectedItems = this.selectAll 
      ? this.items.map(item => item.id) 
      : []
  }
},
computed: {
  selectAll: {
    get() {
      return this.selectedItems.length === this.items.length
    },
    set(value) {
      this.toggleAll()
    }
  }
}
</script>