背景:

单选框和多选框 都是使用了 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. P/Invoke 技术

    .NET 互操作 首先推荐一本书<精通.NET 互操作> ,这本书是目前中文资料里讲 互操作最详尽的书了. 做系统集成项目的同学应该都和设备打过交道(如视频设备:海康.大华等),在大多数情 ...

  2. numpy 数组集合运算及下标操作

    1. 数组的集合运算 1.1. 并集 np.union1d(a,b)计算数组的并集: In [1]: import numpy as np In [2]: a = np.array([1,2,3]) ...

  3. gensim中word2vec

    from gensim.models import Word2Vec Word2Vec(self, sentences=None, size=100, alpha=0.025, window=5, m ...

  4. java jri null

    java通过jri调用r文件,r文件必须和当前类在同一目录下,然后才能re.eval("source(fpath)")执行脚本;其中fpath为通过re.assign设置的文件全路 ...

  5. SCI-hub使用技巧(下载外文文献)

    下载外文文献方法指南: (1)首先查找需要下载文献的DOI (2)在Sci-Hub主页搜索框输入URL.DOI或者PMID. (3)点击open即可看见下载界面. 参考文献:https://mp.we ...

  6. CentOS 7.6出现SSH登录失败的解决方法

    CentOS 7.6出现SSH登录失败的解决方案 问题重现: iterm登录 ssh vagrant@192.168.10.10 The authenticity of host '192.168.1 ...

  7. Python24之递归和迭代

    一.递归的含义及一些用途 递归就是函数通过return语句实现自己调用自己的过程,基本上所有的程序语言都有递归算法,常有人说(’一般程序员使用迭代,天才程序员使用递归‘),汉诺塔游戏.谢尔宾斯基三角形 ...

  8. 00 Python的变量

    变量分类 a.全局变量:在模块内.在所有函数外面.在class外面,这就是全局变量. b.局部变量:在函数内.在class的方法(构造.类方法.静态方法.实例方法)内(变量未加self修饰),这就是局 ...

  9. 小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

    安装好微信小程序开发软件,创建项目 小程序文件结构和传统web对比 结构 传统web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配 ...

  10. C/C++中内存泄漏、内存溢出与野指针的解释与说明

    1.内存泄漏 内存泄漏是指我们在堆中申请(new/malloc)了一块内存,但是没有去手动的释放(delete/free)内存,导致指针已经消失,而指针指向的东西还在,已经不能控制这块内存, 所以就是 ...