实现多选删除vue
实现 Vue 多选删除功能
多选删除功能通常需要结合表格或列表展示数据，并提供复选框供用户选择。以下是实现步骤：
1. 数据准备与表格渲染
定义数据列表和选中项的数组：
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
}渲染表格并添加复选框列：
<table>
<tr v-for="item in items" :key="item.id">
<td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
<td>{{ item.name }}</td>
</tr>
</table>2. 删除功能实现
添加删除按钮和方法：
<button @click="deleteSelected" :disabled="!selectedItems.length">删除选中</button>删除方法实现：
methods: {
deleteSelected() {
this.items = this.items.filter(item =>
!this.selectedItems.includes(item.id)
)
this.selectedItems = []
}
}3. 全选功能（可选）
添加全选复选框：
<input type="checkbox" @change="selectAll" :checked="isAllSelected">
<span>全选</span>实现全选方法：
computed: {
isAllSelected() {
return this.selectedItems.length === this.items.length
}
},
methods: {
selectAll(e) {
if (e.target.checked) {
this.selectedItems = this.items.map(item => item.id)
} else {
this.selectedItems = []
}
}
}4. 使用第三方组件（可选）
对于更复杂的需求，可以考虑使用现成的表格组件：
import { ElTable, ElCheckbox } from 'element-ui'
export default {
components: {
ElTable,
ElCheckbox
}
// ...其余实现类似
}5. 注意事项
- 大型数据集应考虑分页和懒加载
- 删除操作前可添加确认对话框
- 服务端删除需配合API调用
- 考虑添加删除动画提升用户体验
以上实现可以根据实际项目需求进行调整，核心思路是通过v-model管理选中状态，通过数组过滤实现删除功能。
