vue实现选中删除

实现选中删除功能

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

数据绑定与列表渲染

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

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

定义数据与选中状态

在Vue组件中定义数据结构和选中状态：

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' }
      ],
      selectedItems: []
    }
  }
}
</script>

实现删除逻辑

添加删除选中项的方法：

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

完整组件示例

将上述部分组合成完整组件：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        {{ item.name }}
      </li>
    </ul>
    <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>

增强功能

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

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

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

注意事项

确保为列表项设置唯一的key属性，这有助于Vue高效更新DOM

删除操作会修改原始数组，如果需要保留原始数据，可以先创建副本进行操作

对于大型列表，考虑使用虚拟滚动技术优化性能