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

前言

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

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

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

---

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

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

解决方案

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

先来看