当前位置：首页 > VUE

vue怎么实现选中删除

2026-03-26 22:46:19VUE

Vue 实现选中删除功能

数据绑定与选中状态管理

在 Vue 中实现选中删除功能，通常需要结合 v-model 或手动管理选中状态。以下是一个基于复选框的示例：

<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>

<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>

多选与批量删除

对于需要支持多选删除的场景，可以通过以下方式实现：

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

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

使用 Vuex 管理状态

在大型应用中，可以使用 Vuex 来集中管理选中状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [...],
    selectedItems: []
  },
  mutations: {
    toggleSelection(state, itemId) {
      const index = state.selectedItems.indexOf(itemId);
      if (index === -1) {
        state.selectedItems.push(itemId);
      } else {
        state.selectedItems.splice(index, 1);
      }
    },
    deleteSelected(state) {
      state.items = state.items.filter(item =>
        !state.selectedItems.includes(item.id)
      );
      state.selectedItems = [];
    }
  }
});

性能优化建议

对于大量数据的情况，考虑使用虚拟滚动技术优化性能。可以使用第三方库如 vue-virtual-scroller 来实现：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div>
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

注意事项

vue怎么实现选中删除