el-checkbox 如何改为单选

`el-checkbox` 是 Element UI 中的一个组件，它用于创建复选框，用户可以独立选择或取消选择。如果你想将其改为单选形式，你可以采取以下步骤：

1. **禁用多选**：默认情况下，`el-checkbox` 组件支持勾选多个选项。在 Vue 模板中，给每个 `el-checkbox` 添加 `v-model` 的唯一标识符，并设置其 `value` 属性为该标识符，这样当一个选项被选中时，其他选项会自动取消选中。

<template>
  <el-checkbox-group v-model="selectedOption">
    <el-checkbox :label="option.id" v-for="(option, index) in options" :key="index">{{ option.name }}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '', // 唯一的值
      options: [
        { id: '1', name: 'Option A' },
        { id: '2', name: 'Option B' },
        // 更多选项...
      ]
    };
  }
};
</script>

2. **处理单选逻辑**：如果你需要更复杂的单选逻辑，例如基于某个条件切换单选状态，可以在 `methods` 中添加一个函数，在用户交互时更新 `selectedOption`。

methods: {
  handleSingleSelect(option) {
    if (this.selectedOption !== option.id) {
      this.selectedOption = option.id; // 只保留当前选中的选项
      // 其他操作，如清空其他已选的选项...
    }
  }
}

3. **样式调整**：如果需要改变外观，比如去掉下拉箭头等，你可能需要修改 CSS 或者使用自定义主题。