elememtU单选框控制里面输入框内容

最新推荐文章于 2025-06-10 19:34:44 发布

Lavian_

最新推荐文章于 2025-06-10 19:34:44 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_65835778/article/details/127762772

本文介绍了如何在Element UI的el-radio组件后使用input输入框，并通过v-model双向数据绑定实现，当选择'具体金额'时，相应输入框启用，选择'区间金额'时其他输入框禁用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，需求是在el-radio后面显示输入框，选择对应的el-radio时可以在其后的输入框输入内容，另外的输入框则禁用，效果如下图所示

实现代码：

<el-form ref="formList" :model="formList"  :rules="rules">
  <el-form-item label="产品价格" prop="price">
      <el-radio-group v-model="priceType">
        <el-radio label="1" >具体金额 </el-radio>
            <el-input 
               placeholder="如：99" 
               class="short" 
               v-model="specificPrice" 
               :disabled="priceType=='2'">
            </el-input>
            <el-radio label="2" class="marginLeft">区间金额</el-radio>
            <el-input 
               placeholder="如：99" 
               class="short" 
               v-model="areaPrice[0]" 
               :disabled="priceType=='1'">
            </el-input>
            <el-button type="text" style="color:black">~</el-button>
            <el-input 
               placeholder="如：99" 
               class="short" 
               v-model="areaPrice[1]" 
               :disabled="priceType=='1'">
            </el-input>
     </el-radio-group>
   </el-form-item>
</el-form>