背景:

单选框和多选框 都是使用了 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. 构建Springboot项目的3种方式

    一.自己创建: 1.创建maven项目 2.pom.xml添加如下内容: <!--1.指定依赖都由springboot管理--> <parent> <groupId> ...

  2. php面向对象(文件操作)

    文件操作 1.只能操作服务器的文件 2.文件包含目录和文件 判断文件类型 var_dump(filetype("../0529")); //返回文件的类型:目录dir 文件file ...

  3. STM32之串口波特率计算

    1.1 波特率结构框图 1.2 波特率寄存器示意图 1.3 波特率计算公式示意图 两图看出,串口波特率寄存器是一个32位,只用低16位,低16位又划分,低4位用来装小数,其他用来装整数. 波特率计算公 ...

  4. 简单layer 快速上手

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. C++ 数组和vector的基本操作

    1.静态数组的基本操作 int a[5] = {0, 3, 4, 6, 2}; 1.1 数组的遍历 1.1.1 传统的for循环遍历 int size = sizeof(a) / sizeof(*a) ...

  6. zabbix 数据库分表操作

    近期zabbix数据库占用的io高,在页面查看图形很慢,而且数据表已经很大,将采用把数据库的数据目录移到新的磁盘,将几个大表进行分表操作 一.数据迁移: 1.数据同步到新的磁盘上,先停止mysql(不 ...

  7. NOPI 读与写

    Excel读取和写入的完整代码using NPOI.HSSF.UserModel;using NPOI.SS.UserModel;using NPOI.XSSF.UserModel;using Sys ...

  8. Datatable批量导入到表

    封装批量提交数据到表,用于数据同步作业 private string GetSelectFieldNames(DataTable dataTable, string tableName = " ...

  9. IIS发布问题解决

    一. HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure ://安装AspNetCoreModule托管模块后执行1. net stop wa ...

  10. iOS - 数据存储方式(本地化)

    iOS中数据存储方式 一般使用以下4种:(已更新) .NSKeyedAchiever//序列化 存放对象 .NSUserDefaults//本质是plist存储 NSData.NSString.NSN ...