Vue3 - Element Plus 组件库让 [el-radio 单选框] 与 [el-checkbox 复选框] 由 “横向排列“ 改为 “纵向排列“ 显示（将单选框/多选框设置为纵向排列效果）

已于 2025-01-19 16:52:13 修改
阅读量3.9k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： + Vue3 + Vue3 开发问题汇总 文章标签： vue3.js element plus v3 el radio单选框 el-checkbox复选框 横向排列改为纵向排序方法 怎么让每个选项断行竖向显示排列 让选项变成块容器独占一行
于 2023-08-16 12:04:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/132297064
+ Vue3 同时被 2 个专栏收录
255 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue3 开发问题汇总
163 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍了在Vue3与Element Plus框架下，如何将el-radio单选框和el-checkbox复选框的默认横向排列改为纵向排列。通过调整CSS样式，实现单选框和复选框的竖向显示，保持组件内部逻辑不变。

前言

在 Element Plus 组件库中，<el-radio> / <el-checkbox> 单选和复选框默认都是 “横向排列”。

本文 实现了在 vue3 + element plus 框架开发中，将单选框 / 复选框排列方式改为 “纵向排列”（换行竖向显示），

简单说，把原来横着排列的单选框、复选框改为竖着排列的样式。

如下图所示，按照本文的防范，无论是单选还是复选框都可以竖起来了。

示例代码干净整洁，无任何乱七八糟的代码

在这里插入图片描述

解决方案

以下方案分为 “单选” 和 “多选” 两个，请根据需求进行选择即可。

了解本专栏 订阅专栏 解锁全文
Vue3 - Element Plus 组件库让 [el-radio 单选框] 与 [el-checkbox 多选框] 由 “横向排列“ 改为 “纵向排列“ 显示
良月柒
05-11 1414
在 Vue.js 中，使用 Element Plus 组件库可以轻松地构建出美观、功能强大的用户界面。其中，el-radio和组件是常用的单选框和多选框组件，在很多场景中都能发挥重要作用。在默认情况下，它们通常是横向排列的，这在某些场景下可能不够灵活。本文将介绍如何将这两个组件的排列方式改为纵向，以满足更多样化的需求。
element适配方案
xiaoququ的博客
03-02 1626
<template> <div> <el-card> <el-divider content-position="left">横向排列form表单</el-divider> <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="110px"> <el-form-it...
element ui el-checkbox竖排列
BMG-Princess
12-26 7581
只需要在el-checkbox 中加入样式：style="display:block;" 例如 <el-checkbox-group v-model="checkList" @change="changeCheckbox"> <el-checkbox v-for="item in controlDatas" :label="item.Paramet...
Elementui中如何使el-radio垂直排放
最新发布
sukiaka的博客
08-10 273
根据UI的设计要求，需要将一组radio单选框呈现垂直排放。让el-radio变成块级元素，即可独占一行。
vue3 elementPlus的二次开发之el-radio的功能开发
weixin_44358678的博客
05-27 600
el-radio 生成一个 可以取消单选的的el-radio
解决elmentplus的el-raido单选按钮实现纵向排列
a820206256的博客
11-04 1742
elmentplus el-raido-group el-raido实现纵向排列
element单选框组el-radio竖向排列 垂直排列
XiaYeTende的博客
07-16 1605
【代码】element单选框组el-radio竖向排列 垂直排列。
(el-radio)操作(不使用 ts)：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用
狮子座的男孩
07-28 2768
【代码】(el-radio)操作：Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用。
elementui el-radio 垂直排列
weixin_43159039的博客
09-05 1320
直接使用css修改样式。
radio控件设置纵向布局的方法
郝振明的博客
11-14 1万+
RadioGroup实现单选框的多行排列
08-25
主要为大家详细介绍了RadioGroup实现单选框的多行排列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在element-plus中想要多选框（Checkbox）的功能，但是想要单选框(Radio)的圆形样式如何实现
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
09-07 2529
在element-plus中想要多选框（Checkbox）的功能，但是想要单选框(Radio)的圆形样式，修改方形选择框为圆形样式的过程。
elementui——element复选框el-checkbox如何纵向排列改成横向排列
weixin_37877794的博客
06-30 4458
<el-form-item label="问题类型"> <el-checkbox-group v-for="(item, index) in checkboxList" :key="index" v-model="form.type" style="display:inline-block; padding-left: 20px" > <el-checkbox :label="item.label" :value="item.va
解决element ui el-radio单选框再点一次取消选中(改变复选框el-checkbox选中样式）
honeymoon_的博客
06-15 5056
针对单选框有复选框再次点击一次取消这个问题，没有采取网上所说绑定事件解决，而是另辟蹊径，改动样式。请看下文： 由于复选框element-ui具有点击一次选中，再次点击取消这个功能，因此利用el-checkbox复选框，代替单选框el-radio。 <el-checkbox v-model="checked">备选项</el-checkbox> data() { return { checked: true, //默认选中 } } 但是，想要单选框
vue 3 element-plus el-table纵向多级表头
GoodLuck_yyh的博客
12-05 2392
vue 3 element-plus el-table纵向多级表头
elementUi el-checkbox更改样式
abs_botton的博客
12-12 1520
版本:element2 vue2。
element ui el-radio-group 增加垂直排列
热门推荐
深海微澜
07-31 1万+
使用el-radio-group, 只能进行水平排列。 如： 像让其垂直排列怎么办？ 解决： 可以通过添加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> .
Vue复选框、下拉框使用案例，复选框选项元素（el-checkbox）换行竖向显示
hkl_Forever的博客
07-21 7474
【3】整个复选框一系列函数案例。1、下拉框初始化案例代码。
Vue+Element-UI：实现三级CheckBox复选框的多状态选择
在Vue项目中，当需要实现一个复杂的三级CheckBox复选框功能时，如果依赖Element-UI库，由于其table组件默认支持的是多选行，不适用于处理多级的选择结构。这篇文章提供了一种解决方案，即如何在Element UI的基础上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不秃头的媛

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值