element-plus 多选框取消选中
时间: 2023-06-28 09:05:58 浏览: 578
要取消 Element Plus 多选框的选中状态,你可以使用 `v-model` 指令来绑定一个数组,然后在数组中删除相应的选项。以下是一个示例:
```html
<el-checkbox-group v-model="checkedFruits">
<el-checkbox label="apple">苹果</el-checkbox>
<el-checkbox label="banana">香蕉</el-checkbox>
<el-checkbox label="orange">橙子</el-checkbox>
</el-checkbox-group>
```
在 Vue 实例中,你需要定义一个 `checkedFruits` 数组,然后在需要取消选中的时候,使用 `splice` 方法将选项从数组中删除:
```javascript
data() {
return {
checkedFruits: ['apple']
}
},
methods: {
uncheckFruit(fruit) {
const index = this.checkedFruits.indexOf(fruit)
if (index !== -1) {
this.checkedFruits.splice(index, 1)
}
}
}
```
在上面的代码中,`uncheckFruit` 方法接受选中的水果作为参数,并查找该水果在 `checkedFruits` 数组中的索引。如果找到了,就使用 `splice` 方法将其删除。你可以在需要取消选中的地方调用此方法,如点击一个“取消选中”按钮。
希望这可以帮助你取消 Element Plus 多选框的选中状态。
阅读全文