[ElemeFE/element]关于 el-radio-group 增加垂直排列的建议

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

liyanlong

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

baiyaaaaa

@baiyaaaaa 同求

An0nymous0

同求

liangklfangl

可以通过添加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>

Missna

同求

ALiangLiang

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

bilibiliou

popbayun

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

plumos

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

flyher

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

dd1994

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

guominfang

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

yiyiyiqi

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

shadowfax-h

參考這篇, 手動對齊一下就可以了! 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>

ppkliu

A workaround is:

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

code:

result: Screen Shot 2022-06-28 at 1 39 47 PM

warren30815

set style diaplay: flex; works either.

jxxl998

[ElemeFE/element]关于 el-radio-group 增加垂直排列的建议

回答