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

最新推荐文章于 2024-06-18 22:25:05 发布

Lavian_

最新推荐文章于 2024-06-18 22:25:05 发布

阅读量1.3k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65835778/article/details/127762772

版权

首先，需求是在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>