【实现选定单选框出现对应的选择框或输入框】

最新推荐文章于 2024-01-30 23:16:14 发布

TWenYuan

最新推荐文章于 2024-01-30 23:16:14 发布

阅读量1.5k

点赞数

分类专栏： javaScript vue 文章标签：前端

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

版权

javaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

一、写好全部显示时的样式（单选框和要同步对应显示的内容）
二、v-model绑定单选框的参数
三、用v-if，如果form.mode的名称内容恒等于 ‘某值’ 时显示特定对应的内容

            <el-col :span="8">
              <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>
                  <el-radio label="single-cp-multi-list">单候选路径多分段路径</el-radio>
                  <el-radio label="multi-cp-multi-list">多候选路径多分段路径</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            
            <el-col :span="8">
              <div class="border" v-if="form.mode==='multi-cp-single-list'">
                <el-form-item label="期望路径条数" label-width="160px">
                  <el-select v-model="form['candidate-path-num']" placeholder="">
                    <el-option :label="2" :value="2"/>
                    <el-option :label="3" :value="3"/>
                    <el-option :label="4" :value="4"/>
                  </el-select>
                </el-form-item>
              </div>
              <div class="border" v-if="form.mode==='single-cp-multi-list'">
                <el-form-item label="期望负载分担条数" label-width="160px">
                  <el-select v-model="form['segment-list-num']" placeholder="">
                    <el-option :label="2" :value="2"/>
                    <el-option :label="3" :value="3"/>
                    <el-option :label="4" :value="4"/>
                    <el-option :label="5" :value="5"/>
                    <el-option :label="6" :value="6"/>
                    <el-option :label="7" :value="7"/>
                    <el-option :label="8" :value="8"/>
                  </el-select>
                </el-form-item>
              </div>
              <div class="border" v-if="form.mode==='multi-cp-multi-list'">
                <el-form-item label="期望路径条数" label-width="160px" style="margin-bottom: 10px">
                  <el-select v-model="form['candidate-path-num']" placeholder="">
                    <el-option :label="2" :value="2"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="期望负载分担条数" label-width="160px">
                  <el-select v-model="form['segment-list-num']" placeholder="">
                    <el-option :label="2" :value="2"/>
                    <el-option :label="3" :value="3"/>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

<script>
return {
     rendered: false,
     form: {
          mode: 'single',
         'candidate-path-num': 2,
         'segment-list-num': 2,
      },
}
 
  computed:{
     mode(){
        return this.form.mode
     }
  },
  watch:{
       // 更改工作方式时初始化参数，重绘边框
        mode() {
          if (this.rendered) {
             this.form['candidate-path-num'] = 2
             this.form['segment-list-num'] = 2
          }
      this.rendered = true
    },
  }
 </script>