element-plus单选框

Element Plus是一个基于Vue.js的UI组件库，它提供了一套现代化、易用的界面元素，包括单选框。Element Plus的单选框组件被称为`el-radio`，它是一个轻量级的选择控件，用户可以选择其中的一个选项。该组件通常有以下几个基本属性：

1. `value`：当选中的值，一般绑定到数据模型上。
2. `label`：显示的文本标签。
3. `v-model`：双向数据绑定，用于控制单选框的状态。

使用示例：

<template>
  <el-radio v-model="selectedValue" label="Option 1">Option 1</el-radio>
  <el-radio label="Option 2">Option 2</el-radio>
  <el-radio label="Option 3">Option 3</el-radio>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 'Option 1', // 默认选中Option 1
    };
  },
};
</script>

在上面的例子中，当用户点击任一单选按钮时，`selectedValue`就会相应改变，反映当前选择的值。

相关问题

vue3 element-plus 单选框组嵌套单选框组

可以通过使用`el-radio-group`组件和嵌套的`el-radio-group`组件来实现单选框组嵌套单选框组的效果。以下是一个示例代码：

<template>
  <div>
    <el-radio-group v-model="selectedCity">
      <el-radio :label="1">北京</el-radio>
      <el-radio :label="2">上海</el-radio>
      <el-radio :label="3">广州</el-radio>
    </el-radio-group>
    
    <el-radio-group v-model="selectedDistrict">
      <el-radio :label="1" v-if="selectedCity === 1">朝阳区</el-radio>
      <el-radio :label="2" v-if="selectedCity === 1">海淀区</el-radio>
      <el-radio :label="3" v-if="selectedCity === 2">黄浦区</el-radio>
      <el-radio :label="4" v-if="selectedCity === 2">徐汇区</el-radio>
      <el-radio :label="5" v-if="selectedCity === 3">天河区</el-radio>
      <el-radio :label="6" v-if="selectedCity === 3">越秀区</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '',
      selectedDistrict: ''
    }
  }
}
</script>

在上面的示例中，我们首先创建了一个外部的`el-radio-group`组件，用于选择城市。然后，我们创建了一个内部的`el-radio-group`组件，用于选择城市对应的区域。通过在内部`el-radio`元素上使用`v-if`指令来根据所选城市动态显示/隐藏对应的区域选项。

请注意，如果您需要实现更多层次的嵌套，可以使用类似的方式嵌套多个`el-radio-group`组件。但是请注意不要深度嵌套太多层，否则可能会影响性能和用户体验。

element-plus的单选框

element-plus的单选框可以通过el-radio-group和el-radio两个组件来实现。其中el-radio-group是单选框组的容器，el-radio是单选框选项。具体使用方法如下：

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="1">选项一</el-radio>
    <el-radio :label="2">选项二</el-radio>
    <el-radio :label="3">选项三</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radio: 1
    };
  }
};
</script>

其中，v-model绑定的是当前选中的选项的值，即label的值。如果需要设置默认选中的选项，可以在data中设置radio的初始值。