vue 多选框实现删除
Vue 多选框实现删除功能
实现多选框删除功能通常涉及以下关键步骤：
数据绑定与多选框状态管理
在 Vue 组件中定义 data 属性存储选项列表和选中项的 ID 数组：
data() {
return {
items: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' }
],
selectedItems: []
}
}模板中的多选框绑定
使用 v-model 绑定到 selectedItems 数组，v-for 渲染选项列表：
<div v-for="item in items" :key="item.id">
<input
type="checkbox"
:value="item.id"
v-model="selectedItems"
>
{{ item.name }}
</div>
<button @click="deleteSelected">删除选中项</button>删除逻辑实现 通过过滤数组移除选中项，注意需创建新数组触发响应式更新：
methods: {
deleteSelected() {
this.items = this.items.filter(
item => !this.selectedItems.includes(item.id)
)
this.selectedItems = [] // 清空选中状态
}
}增强功能实现方案
批量删除接口对接 若需调用 API 删除后端数据，可在删除方法中添加异步请求：
async deleteSelected() {
try {
await axios.delete('/api/items', {
data: { ids: this.selectedItems }
})
this.items = this.items.filter(
item => !this.selectedIds.includes(item.id)
)
} catch (error) {
console.error('删除失败', error)
}
}空选状态提示 添加条件判断避免空选择时触发无效操作：
deleteSelected() {
if (this.selectedItems.length === 0) {
alert('请至少选择一项')
return
}
// 正常删除逻辑...
}使用计算属性优化 通过计算属性动态控制按钮状态：
computed: {
isDisabled() {
return this.selectedItems.length === 0
}
}模板中绑定：
<button
@click="deleteSelected"
:disabled="isDisabled"
>
删除选中项
</button>注意事项
- 始终为
v-for设置唯一的:key属性 - 数组操作需使用响应式方法（如
filter），避免直接索引修改 - 复杂项目建议使用 Vuex 或 Pinia 管理状态
- 列表项较多时可添加分页或虚拟滚动优化性能
