Elementui中如何使el-radio垂直排放

原创已于 2025-08-10 14:44:38 修改 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

于 2025-08-10 14:42:28 首次发布

根据UI的设计要求，需要将一组radio单选框呈现垂直排放。但是el-radio是行内块级元素，水平排列，不会独占一行。

方法一：使用Flex布局


<template>
  <el-radio-group v-model="radioValue" class="vertical-group">
    <el-radio label="option1">选项一</el-radio>
    <el-radio label="option2">选项二</el-radio>
    <el-radio label="option3">选项三</el-radio>
  </el-radio-group>
</template>

<style scoped>
.vertical-group {
  display: flex;
  flex-direction: column; /* 垂直排列 */
}
/* 可选：添加间距 */
.vertical-group .el-radio {
  margin-bottom: 10px;
}
</style>

方法二：使用 CSS 设置块级布局

<template>
  <el-radio-group v-model="radioValue">
    <el-radio class="vertical-radio" label="option1">选项一</el-radio>
    <el-radio class="vertical-radio" label="option2">选项二</el-radio>
    <el-radio class="vertical-radio" label="option3">选项三</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioValue: 'option1'
    };
  }
};
</script>

<style scoped>
/* 关键：设置每个 radio 为块级元素 */
.vertical-radio {
  display: block;
  margin: 10px 0; /* 添加垂直间距 */
}
</style>

让el-radio变成块级元素，即可独占一行。