vue3element-plus单选

在 Vue3 中使用 Element Plus 的单选功能非常直观。Element Plus 提供了 `el-radio-group` 组件用于创建单选组，而 `el-radio` 组件则是构成单选选项的基本元素。以下是基本的使用方法：

1. 引入组件：

   <script setup> import { ElRadioGroup, ElRadioButton } from "element-plus"; </script>

2. 定义单选组和选项：

   <template>
     <el-radio-group v-model="selectedValue">
       <el-radio-button v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
     </el-radio-group>
   </template>

   <script setup>
   const options = [
     { value: 'option1', label: '选择一' },
     { value: 'option2', label: '选择二' },
     // 添加更多选项...
   ];
   let selectedValue = '';
   </script>

3. 控制值：
`v-model` 指令绑定当前选中的值，改变选项时 `selectedValue` 将会相应更新。

4. 可选功能：
- `@change` 事件：在单选切换时触发，传递新选中的值作为参数。
- `size` 属性：控制单选按钮的大小，如 `small`, `medium`, `large` 等。