elementui单选
使用 ElementUI 实现单选功能
ElementUI 提供了 el-radio 和 el-radio-group 组件来实现单选功能。以下是如何使用它们的详细方法：
基本单选
最简单的单选可以通过 el-radio 组件实现，通常需要配合 v-model 进行数据绑定：
<template>
<el-radio v-model="radio" label="1">选项1</el-radio>
<el-radio v-model="radio" label="2">选项2</el-radio>
</template>
<script>
export default {
data() {
return {
radio: '1'
}
}
}
</script>单选组
对于多个选项的情况，使用 el-radio-group 包裹 el-radio 更为方便：
<template>
<el-radio-group v-model="radio">
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
<el-radio label="3">选项3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radio: '1'
}
}
}
</script>禁用状态
通过 disabled 属性可以禁用单个或所有单选选项：
<el-radio-group v-model="radio" disabled>
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
</el-radio-group>边框样式
添加 border 属性可以为单选按钮添加边框：
<el-radio-group v-model="radio">
<el-radio label="1" border>选项1</el-radio>
<el-radio label="2" border>选项2</el-radio>
</el-radio-group>按钮样式
使用 el-radio-button 可以实现按钮样式的单选：
<el-radio-group v-model="radio">
<el-radio-button label="1">选项1</el-radio-button>
<el-radio-button label="2">选项2</el-radio-button>
</el-radio-group>动态渲染选项
可以通过 v-for 动态渲染单选选项：
<template>
<el-radio-group v-model="radio">
<el-radio
v-for="item in options"
:key="item.value"
:label="item.value"
>
{{item.label}}
</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radio: '1',
options: [
{ value: '1', label: '选项1' },
{ value: '2', label: '选项2' }
]
}
}
}
</script>事件处理
可以通过 @change 事件监听选项变化：
<el-radio-group v-model="radio" @change="handleChange">
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
</el-radio-group>
<script>
export default {
methods: {
handleChange(val) {
console.log('选中的值:', val)
}
}
}
</script>注意事项
v-model绑定的值应与label值类型一致（都是字符串或都是数字）- 使用
el-radio-group时，v-model应绑定在 group 上而非单个 radio - 按钮样式的单选需要使用
el-radio-button而非el-radio - 动态渲染选项时，确保每个选项有唯一的
key值
以上方法涵盖了 ElementUI 单选功能的常见使用场景，可根据实际需求选择合适的方式实现。
