el-checkbox-group实现多选删除
时间: 2023-12-20 21:21:15 浏览: 311
要实现多选删除,你可以使用`el-checkbox-group`组件配合`el-checkbox`组件实现。
首先,在你的数据中为每一项添加一个`checked`属性,表示是否被选中。然后使用`el-checkbox-group`组件来展示列表,并将每个列表项的`checked`属性与对应的`el-checkbox`组件的`v-model`绑定起来。
在删除操作中,你可以遍历数据列表,找到被选中的项,将其从列表中删除。
以下是一个简单的示例代码:
```html
<template>
<div>
<el-checkbox-group v-model="selectedItems">
<el-checkbox v-for="item in items" :key="item.id" :label="item" @change="handleCheckboxChange">{{ item.name }}</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="deleteSelectedItems">删除选中项</el-button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1', checked: false },
{ id: 2, name: 'Item 2', checked: false },
{ id: 3, name: 'Item 3', checked: false }
],
selectedItems: []
}
},
methods: {
handleCheckboxChange() {
// do something when checkbox selection changes
},
deleteSelectedItems() {
this.items = this.items.filter(item => !this.selectedItems.includes(item));
this.selectedItems = [];
}
}
}
</script>
```
在上面的示例中,`items`是数据列表,每个项包含一个`checked`属性来表示是否选中。使用`v-for`指令遍历列表,将每个项渲染为一个`el-checkbox`组件。通过`v-model`将选中的项绑定到数组`selectedItems`中。点击"删除选中项"按钮时,会删除选中的项。
你可以根据自己的实际需求进行修改和扩展。希望对你有帮助!
阅读全文