背景:

单选框和多选框 都是使用了 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. python 最麻烦的时间有药了

    https://www.cnblogs.com/sunshineyang/p/6818834.html 一:经常使用的时间方法 1.得到当前时间 使用time模块,首先得到当前的时间戳 In [42] ...

  2. 如何取到el-select中的label

    在el-select中我们一般都是取到value的值,但是有时候我们需要value和label都需要.那怎么方便的取到呢 在网上经常有ref="cascader"这个方法,但是经过 ...

  3. 利用单臂路由实现vlan间路由

    本实验模拟公司场景 通过路由器实现不同vlan部门间通讯,拓扑图如下

  4. Nio学习笔记(大部分网上摘抄)

    Nio与IO的区别 原有的 IO 是面向流的.阻塞的,NIO 则是面向块的.非阻塞的. 1.IO流每次从流中读一个或多个字节,直至读完所有字节,他们没有被缓存在其他地方,并且,IO流不能移动流中的数据 ...

  5. git基本使用及分支切换命令

    git init 生成本地仓库 git status  查看本地文件状态,未提交的文件显示红色 git add .  (点表示提交所有文件到暂存区,也可指定部分文件到暂存区,填写指定文件名加路径即可) ...

  6. php数组指针函数

    数组指针函数有reset(),prev(),current(),next(),end(),key(),each() 其中reset(),prev(),current(),next(),end(),都是 ...

  7. Linux和Windows系统目录结构区别

    Windows目录结构图 Linux目录结构图 我们所有的操作尽量都要在/home/username目录下进行. 快捷进入家目录方式是cd ~.

  8. Spring Boot使用@Value注解获取配置文件中的属性

    获取配置文件的内容——

  9. 优秀的java 社区

    并发编程网 - ifeve.com InfoQ - 促进软件开发领域知识与创新的传播开源中国 - 找到您想要的开源项目,分享和交流IBM developerWorks 中国 : IBM's resou ...

  10. 使用Dockerfile构建镜像并push到私有仓库

    环境:OS X 10.10.5 maven 3.3.9 Docker version 1.12.2 docker-machine version 0.8.2 程序示例为http://www.cnblo ...