el-checkbox 怎么实现只能单选 来回切换

el-checkbox可以通过一些技巧实现单选，以下是两种实现方式： 1. 多个单选框实现单选 ```html <template> <el-checkbox-group v-model="checkList" @change="statusChange"> <el-checkbox label="1">1</el-checkbox> <el-checkbox label="2">2</el-checkbox> <el-checkbox label="3">3</el-checkbox> <el-checkbox label="4">4</el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { checkList: [] }; }, methods: { statusChange(value) { if (this.checkList.length > 1) { this.checkList.splice(0, 1); } } } }; </script> ``` 2. 两个多选框实现单选 ```html <template> <el-checkbox-group v-model="status"> <el-checkbox false-label="null" :true-label="1" name="status">启用</el-checkbox> <el-checkbox false-label="null" :true-label="2" name="status">禁用</el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { status: 1 }; } }; </script> ```

### 回答1： el-checkbox-group可以实现多选，如果要实现单选，可以将所有的选项都设置为同一个v-model，这样只有一个选项可以被选中。 例如： ``` <el-checkbox-group v-model="selected"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> ``` 在data中定义selected变量： ``` data() { return { selected: '' } } ``` 这样就可以实现单选了。 ### 回答2： el-checkbox-group是ElementUI中的一个组件，可以实现多选，但是对于单选来说，需要做一些特殊的处理。 首先，在使用el-checkbox-group进行单选时，需要将其中一个复选框的默认值设置为true，使其处于选中状态。然后，在el-checkbox-group的change事件中，通过遍历组件中的复选框，将除了被选中的复选框外，其它复选框都设置为不选中状态。 下面是一个示例代码，展示了如何使用el-checkbox-group实现单选功能： ``` <template> <el-checkbox-group v-model="selected"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { selected: ['选项1'] // 默认选中第一个 }; }, methods: { handleChange(val) { // 遍历复选框，将未被选中的复选框设置为不选中 this.$nextTick(() => { const checkboxes = document.querySelectorAll('.el-checkbox__input'); for (let i = 0; i < checkboxes.length; i++) { const checkbox = checkboxes[i]; if (checkbox.value !== val[0]) { checkbox.checked = false; } } }); } }, mounted() { // 初始化时调用一次handleChange，将其它选项设置为不选中状态 this.handleChange(this.selected); } }; </script> ``` 在这个示例中，我们默认将第一个复选框设置为选中状态。在change事件中，我们遍历了组件中的复选框，并通过判断复选框是否被选中，来达到单选的效果。其中，$nextTick方法用来确保DOM更新完毕后再进行操作（因为el-checkbox是异步渲染的）。在组件挂载时，我们也调用了handleChange方法，来将其它选项设置为不选中状态。 以上就是使用el-checkbox-group实现单选的方法。需要注意的是，这种实现方式仅适用于单选的情况。如果想要实现类似于单选框的效果（即只能选中一个选项，但是可以取消选中状态），建议使用el-radio-group组件。 ### 回答3： el-checkbox-group 组件是 Element UI 中的多选框组，可以用于实现多选功能，在默认情况下多选框是可以同时选中多个选项的，但是我们可以在 el-checkbox-group 中设置 "max" 属性的值为 1 来实现单选功能。 使用 el-checkbox-group 组件实现单选的步骤如下： 1. 在 Vue 实例中引入 el-checkbox-group 组件 ``` <template> <el-checkbox-group v-model="checked" :max="1"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> </template> ``` 2. 定义一个名为 checked 的数据属性 ``` data() { return { checked: '' } } ``` 3. 在 el-checkbox-group 中设置 "max" 属性的值为 1，这样就可以只选中一个选项。如果不设置 "max" 属性，多选框就会默认允许同时选中多个选项。 4. 在 el-checkbox 组件中设置不同的 label 值，用于处理选中的选项。 通过以上步骤，我们就可以使用 el-checkbox-group 组件实现单选。当用户选中一个选项时，checked 数据属性就会更新为该选项的 label 值。如果用户又重新选择另一个选项，checked 数据属性的值就会更新为新选项的 label 值，原选项就会被取消选中。这样就达到了单选的效果。