el-checkbox-group怎样改变选中状态
时间: 2023-04-04 22:04:28 浏览: 164
el-checkbox-group可以通过v-model绑定一个数组来控制选中状态,也可以通过调用setCheckedKeys方法来改变选中状态。例如,setCheckedKeys(['1', '2'])可以将id为1和2的选项设为选中状态。
相关问题
el-checkbox-group 如何获取当前选中的项
您可以使用v-model来获取el-checkbox-group当前选中的项,例如:
```html
<el-checkbox-group v-model="checkedItems">
<el-checkbox label="item1"></el-checkbox>
<el-checkbox label="item2"></el-checkbox>
<el-checkbox label="item3"></el-checkbox>
</el-checkbox-group>
```
然后在Vue的data中定义checkedItems数组来存储当前选中的项:
```javascript
data() {
return {
checkedItems: []
};
}
```
当用户选择或取消选择某个项目时,checkedItems数组会自动更新。您可以在需要的地方访问checkedItems数组来获取当前选中的项。
el-checkbox-group 传入值,选中的el-checkbox 子项禁用,未选中的可用
你可以通过 `v-model` 绑定 `el-checkbox-group` 的选中值,然后使用 `:disabled` 绑定每个 `el-checkbox` 的禁用状态。当选中值包含当前 `el-checkbox` 的值时,该 `el-checkbox` 将被禁用。
以下是一个示例代码:
```html
<template>
<el-checkbox-group v-model="selectedValues">
<el-checkbox v-for="item in options" :key="item.value" :label="item.value" :disabled="isDisabled(item)">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
],
selectedValues: []
};
},
methods: {
isDisabled(item) {
return this.selectedValues.includes(item.value);
}
}
};
</script>
```
在上面的示例中,当某个选项被勾选时,其他未被勾选的选项依然可用,但是被勾选的选项将被禁用。