关于 el-radio-group 增加垂直排列的建议

[liyanlong]

ElementUI version

1.2.1

建议内容

使用 el-radio-group, 觉得只能进行水平排列有点单一. 是否可以增加垂直排列

可以尝试加上一个 type 来控制..

<template>
<el-radio-group v-model="selectMod" size="small" type="vertical">
      <el-radio-button label="第一列"></el-radio-button>
      <el-radio-button label="第二列"></el-radio-button>
      <el-radio-button label="第三列"></el-radio-button>
</el-radio-group>
</template>
<script>
export default {
  data () {
    return {
        selectMod: '第一列' 
    }
  }
}
</script>

Exmaple

[baiyaaaaa]

没有太多人有这个需求，可能暂时没有这个计划，你可以用CSS处理。

[An0nymous0]

@baiyaaaaa 同求

[liangklfangl]

同求

[Missna]

可以通过添加div实现垂直排列

<template>
<el-radio-group v-model="selectMod" size="small" type="vertical">
<div v-for= index of 3>
 <el-radio-button label="第一列"></el-radio-button>
</div>
</el-radio-group>
</template>

[ALiangLiang]

同求

[bilibiliou]

真坑，这个需求实现起来这么麻烦吗？

[popbayun]

[plumos]

2020了，这个功能开发出来了吗？

[flyher]

el-checkbox嵌入个style="display:block;"临时解决一下吧。

[dd1994]

同求 现在每次都是覆盖样式

[guominfang]

@baiyaaaaa 这样样式需求很多人使用吧，希望能打开或者合并

[yiyiyiqi]

同求，2022了，需求实现了吗

[shadowfax-h]

可以用div来实现。<div><el-radio></el-radio></div><div><el-radio></el-radio></div>

[ppkliu]

參考這篇, 手動對齊一下就可以了!
https://stackoverflow.com/questions/46874662/vertically-aligning-radio-buttons-in-center-aligned-text

      <div style="text-align: center; display:block;">
        <el-radio-group v-model="myrole" class='radioDiv'>
            <div><el-radio :label="3" >AAAAAAAAAA</el-radio></div>
            <div><el-radio :label="2" >BBBBBBB</el-radio></div>
            <div><el-radio :label="1" >CC</el-radio></div>
            <div><el-radio :label="0" >DDDD</el-radio></div>
        </el-radio-group>
      </div>

/* 這邊放class 的css */
<style scoped>
 .radioDiv {
   margin: 0 auto;
   width: auto;
   text-align: left;
   display: table;
}
</style>

[warren30815]

A workaround is:

1. add style="display: table;" to el-radio-group
2. wrap each el-radio with div

code:

result:

[jxxl998]

set style diaplay: flex; works either.