单选框选中时对应输入框可输入

最新推荐文章于 2024-09-27 17:42:05 发布

TWenYuan

最新推荐文章于 2024-09-27 17:42:05 发布

阅读量2.3k

点赞数 4

分类专栏： javaScript 文章标签： javascript html html5

本文链接：https://blog.csdn.net/TWenYuan/article/details/121670795

版权

javaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element UI的单选框组（el-radio-group）和输入框（el-input）组件，通过v-model双向绑定和:disabled属性，实现根据单选框选中状态控制输入框是否可输入的功能。例如，当选择'多候选路径单分段路径'时，才允许输入'期望路径条数'；选择'单候选路径多分段路径'时，才允许输入'期望负载分担条数'。

摘要由CSDN通过智能技术生成

单选框选中时对应输入框可输入

首先在el-radio-group绑定v-model，再设置每个单选框的el-radio的label值，再绑定el-input的：disabled，表示当form的model不等于绑定的radio的label值时为true,可输入，否则一直禁止。

<el-form-item label="路径工作方式">
          <el-radio-group v-model="form.mode">
            <el-radio label="single">单候选最优路径</el-radio>
            <el-radio label="backup">主备候选最优路径</el-radio>
            <el-radio label="multi-cp-single-list">多候选路径单分段路径</el-radio>
            <div class="border">
              <el-form-item label="期望路径条数">
                 <el-input v-model="form.evadeLink" :disabled="form.mode!=='multi-cp-single-list'"></el-input>
              </el-form-item>
            </div>
            <el-radio label="single-cp-multi-list">单候选路径多分段路径</el-radio>
            <div class="border">
              <el-form-item label="期望负载分担条数" label-width="160px">
                <el-input v-model="form.necessaryLink" :disabled="form.mode!=='single-cp-multi-list'"></el-input>
              </el-form-item>
            </div>
          </el-radio-group>
        </el-form-item>