如何让elementUI 循环出来的复选框只能选中一个
时间: 2023-07-07 07:13:59 浏览: 40
在 ElementUI 中,你可以使用 `el-checkbox-group` 和 `el-checkbox` 来实现循环出来的多个复选框,并且只能选中一个的功能。你可以将多个 `el-checkbox` 放在一个 `el-checkbox-group` 中,然后给每个 `el-checkbox` 设置不同的 `label` 值。这样,当你选中一个 `el-checkbox` 时,其它的 `el-checkbox` 就会自动取消选中状态。
以下是一个示例代码:
```html
<template>
<el-checkbox-group v-model="selected">
<el-checkbox v-for="option in options" :label="option.value">{{ option.label }}</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
{ label: '选项3', value: 3 }
],
selected: null
};
}
};
</script>
```
在上面的示例中,`v-model` 指令绑定了一个 `selected` 变量,用来存储用户选中的值。当用户选中一个复选框时,`selected` 变量会被更新。由于使用了 `el-checkbox-group`,所以只能选中一个复选框,其它的复选框就会自动取消选中状态。