在 Element UI 中将 el-radio-group改为纵向排列

泉城老铁2025-08-07 15:51

在 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 官方文档的自定义样式章节