背景:

单选框和多选框 都是使用了 el-select,但传给后端的值类型不一样,多选框传的值是 list类型: ['value1','value2'] ,单选框传值和其他类型一样;设置默认值也是如此

效果展示:

html 代码如下:

 <template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-row style="height:30px" type="flex" >
<el-col :span="4">
<el-form-item label="单选框" >
<el-select v-model="form.selectOne" style="width:140px;">
<el-option label="单选1" value="1"></el-option>
<el-option label="单选2" value="2"></el-option>
<el-option label="单选3" value="3"></el-option>
<el-option label="单选4" value="4"></el-option>
</el-select>
</el-form-item></el-col>
</el-row> <el-row style="height:30px" type="flex" > <el-col :span="12">
<el-form-item label="多选框" required>
<el-select v-model="form.selectMultiple" style="width:300px;" placeholder="多选框" multiple>
<el-option label="多选1" value="1"></el-option>
<el-option label="多选2" value="2"></el-option>
<el-option label="多选3" value="3"></el-option>
<el-option label="多选4" value="4"></el-option>
<el-option label="多选5" value="5"></el-option>
<el-option label="多选6" value="6"></el-option>
<el-option label="多选7" value="7"></el-option>
</el-select>
</el-form-item>
</el-col></el-row>
</el-form>
</div>
</template>

script 代码如下:

 export default {
data() {
return { form: {
selectOne:'2',//单选默认值
selectMultiple:['1','2','3'],//多选默认值
}
}
}, methods: { }, }
</script>

vue 下拉框单选、多选以及默认值的更多相关文章

  1. angularJs(2)表单中下拉框单选多选

    多选 <input type="checkbox" ng-model='game' ng-true-value="1" ng-false-value=&q ...

  2. vue 表格中的下拉框单选、多选处理

    最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...

  3. 关于easyui combobox下拉框实现多选框的实现

    好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...

  4. 使用 Select2 下拉框实现复选

    使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  5. Vue 下拉框值变动事件传多个参数

    在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...

  6. Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项

    今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...

  7. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  8. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  9. extjs下拉框添加复选框

    给ComboBox组件配置listConfig 下拉框代码: var gyslxcm = Ext.create('Ext.form.field.ComboBox',{ id : 'gyslxcm', ...

随机推荐

  1. __iter__方法demo

    class Foo(object): def __init__(self,name,data_list): self.name = name self.data_list = data_list de ...

  2. SGE基本操作

    SGE怎样工作: 1. 接受用户投放的任务 2. 在任务运行以前,将任务放到一个存储区域 3. 发送任务到一个执行设备,并监控任务的运行 4. 运行结束写回结果并记录运行日志 常用的SGE命令: 1. ...

  3. 乐字节Java继承|方法重写、super和final关键字

    大家好,乐字节的小乐又来了,上一篇是:乐字节Java|JavaBean.继承与权限修饰,也是属于Java继承的,今天继续Java继承. 一. 方法的重写 父类不满足子类的要求,按需改写.注意 方法签名 ...

  4. 开源软件“meld”-替代beyond compare -- & 放在linux命令后面真好用

    1, 使用技巧 命令行直接对比文件 meld dir1 dir2 & 亦可以直接打开界面进行类似beyondCompare的操作. { & 放在命令后面表示设置此进程为后台进程 默认情 ...

  5. mac upgrade node and npm

    一直以来, 我们都可以很轻松的更新npm: npm install npm -g 而Node我却是很久没有更新了, 记得当时好像是使用安装包安装的, 实际上有更加简单的安装方法. 实际上Mac上有一个 ...

  6. 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

    1.介绍 补间动画开发者只需指定动画开始,以及动画结束"关键帧", 而动画变化的"中间帧"则由系统计算并补齐! 2.去掉App的标题 (1)将AndroidMa ...

  7. Jenkins+maven+gitlab自动化部署之Jenkins部署(三)

    本章开始正式搭建Jenkins: 公司现在使用的jenkins版本是2.150.3,但是本次实验安装的版本我们选择最新的 2.164.3(当然,当你阅读这篇文章时,此版本已经不是最新),jenkins ...

  8. 【算法】js实现最短时间走完不同速度的路程

    题目: 现在有一条公路,起点是0公里,终点是100公里.这条公路被划分为N段,每一段有不同的限速.现在他们从A公里处开始,到B公里处结束.请帮他们计算在不超过限速的情况下,最少需要多少时间完成这段路程 ...

  9. Eclipse控制台不限日志行数

    在使用Eclipse时,如果控制台输出的内容比较多,控制台之前的内容就会消失,导致前面的控制台打印信息无法查看. 设置Eclipse的控制台属性 设置方法: 打开Eclipse的菜单栏:Window ...

  10. 【flume】5.采集日志进入hbase

    设置我们的flume配置信息 # Licensed to the Apache Software Foundation (ASF) under one # or more contributor li ...