(el-radio) operation (without ts): Change the Radio radio button in Element-plus to a vertically arranged style operation and use

Ⅰ. The comparison between the Element-plusprovided Radioradio button component and the desired target situation:

1. Element-plusProvide Radiocomponents:

First, the Element-uiself-provided Radiocode is (example code):

// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；

<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>

Code address:https://element-plus.gitee.io/zh-CN/component/radio.html#按钮样式

Second, the display of the page is as follows:

2. The situation after the target wants to be modified:

Ⅱ. RadioThe process of realizing the change of the radio button component to achieve the target effect:

RadioThe process of successfully introducing the radio button component into vue3the project ( tsthe syntax of is removed):

First, the code:

<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>

Second, the effect display:

Ⅲ. Summary:

First, where there is something wrong or inappropriate, please give me some pointers and exchanges!
Second, if you repost or quote the content of this article, please indicate the address of this blog https://blog.csdn.net/weixin_43405300. Creation is not easy, but it can be done and cherished!
Third, if you are interested, you can pay more attention to this column (Vue (Vue2+Vue3) interview must-have column):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482