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

一、写好全部显示时的样式（单选框和要同步对应显示的内容）
二、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'] = 2this.form['segment-list-num'] = 2}this.rendered = true},}</script>

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

易语言超级列表框设置选中状态-选择框的方法
属性首先将属性-是否有检查框设置成真.(最好也将类型设置成报表列表框,不然无法显示报表列,同时选择框也不能按列放置) 代码 .版本 2 .支持库 iext.程序集窗口程序集_启动窗口.子程序 __ ...
html设置下拉菜单文本框隐藏,下拉选择框onchange触发隐藏输入框
下拉选择框onchange触发隐藏输入框 window.οnlοad=function(){ var sel=document.getElementById("sel"); if ...
选下拉框的的值对应上传相应的图片_vue.js如何拿到多种类型表单值提交到后台，包含上传图片、单选、复选、文本框、下拉列表框...
2016-01-17 编辑更新 vue.js如何拿到多种类型表单值提交到后台,包含上传图片.单选.复选.文本框.下拉列表框下面的html包括多种类型的表单,其中包括图片上传,如何拿到这些表单的值提交 ...
element_UI select选择框深入解析
别问,问就是今天是1024,混个勋章 el-select介绍开发环境 Select Attributes(参数介绍) select各适用场景介绍使用最广泛的基础单选有禁用选项的选择框选择框禁用 ...
Web自动化测试Selenium(4)frame切换/窗口切换/选择框-2021-10-09
1. frame切换 1.1 问题描述选择 class 属性值为 plant 的元素. elements = wb.find_element_by_css_selector('.plant') 表示 ...
修改CheckBox选择框、设置选择框颜色
使用组件自带的属性 android:buttonTint 可直接设置选择框的颜色修改选择框选中与未选中时的状态,需设置选择器 selector.XML <?xml version=" ...
Python 文本对话框提示框 + 文件夹选择框如何实现
Python 文本对话框提示框: messagebox.showinfo("提示","你好,我是提示框") Python 文件夹选择框: foldr_patch ...
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的时间:2015-07-17 项目:甘肃银行-手机银行问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...

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

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

最新文章

热门文章