elementUI 单选框存在多个互斥的选项中选择的场景

使用 el-radio-group 来使用单选框组,代码如下:

复制代码
<el-radio-group @input="valueChangeHandler" v-model="featureForm.type">
    <el-radio name="feature" label="feature">业务对象</el-radio>
    <el-radio name="directory" label="directory">目录</el-radio>
</el-radio-group>

只需在 el-radio-group 上设置 v-model,每个 el-radio 子项设置label属性。v-model 绑定的响应数据对象的值就是对应这个 label的值,两者相等即可将该 radio 选中。

例如:响应式数据对象 featureForm对象如下:

复制代码
data() {
    return {
      featureForm: {
        type: 'feature',
        name: '',
        label: ''
      },
    }
  }

即可将 业务对象这个单选框选中!

相关推荐
码客前端5 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛5 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程18 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保18 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫19 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
欧阳天风27 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder30 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理31 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染33 分钟前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
xkxnq36 分钟前
第一阶段:Vue 基础入门(第 11 天)
前端·javascript·vue.js