element-plus 的form表单组件之el-radio（单选按钮组件）

单选按钮组件适用于同一组类型的选项只能互斥选择的场景，就是支持单选。单选组件包含以下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>