elementplus 的单选组件使用
时间: 2025-05-27 07:13:22 浏览: 19
### Element Plus 单选组件使用教程
#### 一、安装依赖
为了能够正常使用Element Plus中的单选组件,需先确保已成功引入Element Plus库。通常情况下,在Vue 3项目中可以通过npm或yarn来完成这一操作。
```bash
npm install element-plus --save
```
或者
```bash
yarn add element-plus
```
#### 二、基础用法
单选按钮允许用户从一组互斥选项中选择一项。下面是一个简单的例子展示了如何创建一个带有两个选项的单选按钮组[^1]:
```html
<template>
<div>
<!-- 定义v-model绑定的数据 -->
<el-radio v-model="radio" label="Option A">A</el-radio>
<el-radio v-model="radio" label="Option B">B</el-radio>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 初始化默认值
const radio = ref('Option A')
</script>
```
上述代码片段实现了基本的选择逻辑,其中`label`属性指定了每个选项对应的值,而通过设置`v-model`指令可以轻松实现双向数据绑定[^2]。
#### 三、禁用状态
当某些条件下希望阻止用户更改特定选项时,则可通过向`<el-radio>`标签添加`disabled`布尔型属性来达到目的。如果该属性存在(无论其值为何),则表示当前项处于不可选状态;反之亦然。
```html
<!-- 禁用某个单独的Radio -->
<el-radio :disabled="true" v-model="radioDisabled" label="Disabled Option">Disabled</el-radio>
```
#### 四、配合其他UI元素组合应用
考虑到实际应用场景往往更加复杂多样,因此Element Plus还提供了更多高级特性供开发者灵活运用。比如将单选框与其他表单项相结合形成更复杂的交互界面,如下所示为结合输入框使用的场景之一[^3]:
```html
<template>
<div class="block">
<span class="demonstration">With Input:</span>
<el-input placeholder="Please input..." style="width: 80px;" />
<el-radio-group v-model="inputRadioGroup">
<el-radio-button label="Yes"></el-radio-button>
<el-radio-button label="No"></el-radio-button>
</el-radio-group>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const inputRadioGroup = ref('')
</script>
```
阅读全文
相关推荐


















