单选按钮组件适用于同一组类型的选项只能互斥选择的场景，就是支持单选。单选组件包含以下3个组件
| 组件名 | 作用 |
|---|---|
| el-radio-group | 单选组组件，子元素可以是el-radio或el-radio-button，v-mode绑定单选组的响应式属性 |
| el-radio | 单选组件，label用于展示，value对应选中的值 |
| el-radio-button | 单选组件的按钮形式 |
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance,FormRules } from 'element-plus'const goodType1=ref(1)
const goodType2=ref(1)
const goodType3=ref()interface Good {goodName:stringstock:numbercreateDate:Datedescription:stringgoodType:number
}const goodForm=ref<Good>({goodName:"",stock:10,createDate:new Date(),description:"",goodType:2
});const handlerChange=(value)=>{console.log(value);
}</script><template><el-form :model="goodForm" status-icon label-position="left" label-width="auto" ref="formRef"><el-form-item label="商品类型" prop="goodType"><el-radio-group v-model="goodForm.goodType"><el-radio label="食品类" :value="1"></el-radio><el-radio label="电器类" :value="2"></el-radio> <el-radio label="服装类" :value="3"></el-radio> </el-radio-group></el-form-item><el-form-item label="商品类型" prop="goodName"><el-radio-group v-model="goodType2"><el-radio-button label="食品类" :value="1"></el-radio-button><el-radio-button label="电器类" :value="2"></el-radio-button> <el-radio-button label="服装类" :value="3"></el-radio-button> </el-radio-group></el-form-item><el-form-item label="商品类型" prop="goodName"><el-radio-group v-model="goodType2" @change="handlerChange"><el-radio label="食品类" :value="1" border></el-radio><el-radio label="电器类" :value="2" border> </el-radio> <el-radio label="服装类" :value="3" border></el-radio> </el-radio-group></el-form-item></el-form></template><style scoped></style>
https://element-plus.org/zh-CN/component/radio.html#radio-api
