在 Element UI 中将 el-radio-group
改为纵向排列,可通过以下两种方式实现:
方法一:CSS 样式覆盖(推荐)
xml
<template>
<div class="vertical-radio-group">
<el-radio-group v-model="value">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
<el-radio :label="3">选项3</el-radio>
</el-radio-group>
</div>
</template>
<style scoped>
.vertical-radio-group ::v-deep .el-radio {
display: block; /* 转为块级元素垂直排列 */
margin-bottom: 10px; /* 可选:增加间距 */
}
.vertical-radio-group ::v-deep .el-radio__label {
width: 100%; /* 可选:标签占满容器宽度 */
}
</style>
关键点:
- 使用
::v-deep
穿透 Vue 的 scoped 样式作用域 - 将
.el-radio
的display
属性改为block
- 可通过
margin-bottom
控制选项间距
方法二:Flex 布局
xml
<template>
<el-radio-group
v-model="value"
class="flex-radio-group"
>
<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>
<style scoped>
.flex-radio-group {
display: flex;
flex-direction: column; /* 纵向排列 */
gap: 10px; /* 可选:间距控制 */
}
</style>
注意事项:
- 需要确保 Element UI 版本支持 Flex 布局(建议 2.13+)
- 若样式不生效,可尝试添加
!important
补充说明
- 兼容性问题:两种方法在 Element UI 2.x 均有效,3.x 版本需确认样式类名是否变更
- 嵌套问题:如果 radio 选项中包含复杂内容(如图标+文字),建议使用方法一并通过嵌套样式控制
- 移动端适配:建议配合媒体查询调整间距和字体大小
完整示例可参考 Element UI 官方文档的 自定义样式 章节