vue实现多远删除

实现 Vue 多选删除功能

数据绑定与复选框

在 Vue 组件中定义一个数组存储选中的项，使用 v-model 绑定复选框：

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

模板中使用 v-for 渲染列表，并为每个项添加复选框：

<div v-for="item in items" :key="item.id">
  <input type="checkbox" v-model="selectedItems" :value="item.id">
  {{ item.name }}
</div>

删除方法实现

创建一个方法处理删除逻辑，过滤掉选中的项：

methods: {
  deleteSelected() {
    this.items = this.items.filter(
      item => !this.selectedItems.includes(item.id)
    )
    this.selectedItems = [] // 清空选中状态
  }
}

按钮触发删除

在模板中添加删除按钮绑定该方法：

<button @click="deleteSelected" :disabled="!selectedItems.length">
  删除选中项
</button>

使用计算属性优化

可以添加计算属性判断是否有选中项，控制按钮状态：

computed: {
  hasSelected() {
    return this.selectedItems.length > 0
  }
}

按钮绑定改为：

<button @click="deleteSelected" :disabled="!hasSelected">
  删除选中项
</button>

完整组件示例

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

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