el-checkbox单选实现

要实现el-checkbox的单选效果，可以使用v-model绑定一个数组checkList，然后在change事件中判断数组长度，如果超过1个元素，则将第一个元素删除，保证只有一个选项被选中。例如，可以使用以下代码实现el-checkbox的单选效果：

<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>

// 在methods中定义statusChange方法
methods: {
  statusChange(value) {
    if (this.checkList.length > 1) {
      this.checkList.splice(0, 1);
    }
  }
}

这样，当多选框被选中时，数组checkList会自动添加对应的值；当多选框被取消选中时，对应的值会被从数组checkList中删除。在change事件中，判断数组checkList的长度，如果超过1个元素，则将第一个元素删除，保证只有一个选项被选中。这样就实现了el-checkbox的单选效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [el-checkbox 实现单选功能](https://blog.csdn.net/qq_44981128/article/details/122056859)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [el-checkbox 控制只能单选](https://blog.csdn.net/weixin_44171757/article/details/103403424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]