Ⅰ、Element-plus 提供的Radio單選框組件與想要目標(biāo)情況的對比：

1、Element-plus 提供 Radio 組件情況：

其一、Element-ui 自提供的Radio代碼情況為(示例的代碼)：

// Element-plus 自提供的代碼：
// 此時是使用了 ts 語言環(huán)境，但是我在實際項目中并沒有使用 ts 語言和環(huán)境；

<template>
  <div>
    <el-radio-group v-model="radio1" size="large">
      <el-radio-button label="New York" />
      <el-radio-button label="Washington" />
      <el-radio-button label="Los Angeles" />
      <el-radio-button label="Chicago" />
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const radio1 = ref('New York')
</script>

代碼地址：https://element-plus.gitee.io/zh-CN/component/radio.html#按鈕樣式

其二、頁面的顯示情況為：

2、目標(biāo)想修改后的情況:

Ⅱ、實現(xiàn) Radio 單選框組件達(dá)到目標(biāo)效果變化的過程：

Radio 單選框組件成功引入 vue3 項目的過程(去除了 ts 的語法)：

其一、代碼：

<script setup>
import { ref } from 'vue'

// do not use same name with ref
const radio1 = ref('New York')


</script>

<template>
  <el-radio-group v-model="radio1" size="large" class='radioDiv'>
    <div><el-radio-button label="New York" /></div>
    <div><el-radio-button label="Washington" /></div>
    <div><el-radio-button label="Los Angeles" /></div>
    <div><el-radio-button label="Chicago" /></div>
  </el-radio-group>
</template>

<style lang="scss" scoped>
.radioDiv {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
  // 但是有的項目中又需要類似表格的布局怎么辦呢？可以用display:table來解決;
  // display: table; 語法（類似 <table>）此元素會作為塊級表格來顯示，表格前后帶有換行符;
}
</style>

其二、效果展示：

Ⅲ、小結(jié)：

其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、若有轉(zhuǎn)發(fā)或引用本文章內(nèi)容，請注明本博客地址https://blog.csdn.net/weixin_43405300,創(chuàng)作不易，且行且珍惜！
其三、有興趣的話，可以多多關(guān)注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章來源地址http://www.zghlxwxcb.cn/news/detail-613498.html

到了這里，關(guān)于(el-radio)操作：Element-plus 中 Radio 單選框改成垂直排列的樣式操作與使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！