element-plus 的form表单组件之el-radio(单选按钮组件)

单选按钮组件适用于同一组类型的选项只能互斥选择的场景,就是支持单选。单选组件包含以下3个组件

组件名 作用
el-radio-group 单选组组件,子元素可以是el-radio或el-radio-button,v-mode绑定单选组的响应式属性
el-radio 单选组件,label用于展示,value对应选中的值
el-radio-button 单选组件的按钮形式
javascript 复制代码
<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:string
  stock:number
  createDate:Date
  description:string
  goodType: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

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js