vue 下拉框单选、多选以及默认值
背景:
单选框和多选框 都是使用了 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 下拉框单选、多选以及默认值的更多相关文章
- angularJs(2)表单中下拉框单选多选
多选 <input type="checkbox" ng-model='game' ng-true-value="1" ng-false-value=&q ...
- vue 表格中的下拉框单选、多选处理
最近在用vue做前后端分离,需要在表格中用到下拉框,由于需求变动,从最开始的单选变为多选,折腾了许久,记录一下,供后人铺路 vue 中的表格下拉框单选 collectionsColnumOptions ...
- 关于easyui combobox下拉框实现多选框的实现
好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...
- 使用 Select2 下拉框实现复选
使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- Vue 下拉框值变动事件传多个参数
在使用 Vue 进行开发时,下拉框值变动事件 @change 是很常用的. 其传参一般分为两种方式:默认传参和自定义传参. 默认传参 @change 默认会传选中项标识的参数,在传参处不用定义,在方法 ...
- Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项
今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- extjs下拉框添加复选框
给ComboBox组件配置listConfig 下拉框代码: var gyslxcm = Ext.create('Ext.form.field.ComboBox',{ id : 'gyslxcm', ...
随机推荐
- Linux下安装redis以及常用命令
https://blog.csdn.net/zgf19930504/article/details/51850594 安装: 1.获取redis资源 wget http://download.redi ...
- 第07组 Alpha冲刺(2/4)
队名:秃头小队 组长博客 作业博客 组长徐俊杰 过去两天完成的任务:完成人员分配,初步学习Android开发 Github签入记录 接下来的计划:继续完成Android开发的学习,带领团队进行前后端开 ...
- 介绍几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- C++基础(静态数据成员和静态成员函数)
[简介] 1.静态数据成员在类中声明,在源文件中定义并初始化: 2.静态成员函数没有this指针,只能访问静态数据成员: 3.调用静态成员函数:(1)对象.(2)直接调用: 4.静态成员函数的地址可用 ...
- 长乐培训Day3
T1 奶牛晒衣服 题目 [题目描述] 在熊大妈英明的带领下,时针和他的同伴生下了许多牛宝宝.熊大妈决定给每个宝宝都穿上可爱的婴儿装.于是,为牛宝宝洗晒衣服就成了很不爽的事情. 圣人王担负起了这个重任. ...
- 剑指offer50:数组中重复的数字
1 题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长 ...
- Python 数据结构理解分享
摘要:分享学习Python数据结构的一些理解,主要包含序列(如列表和元组),映射(如字典)以及集合3中基本的数据结构,以及可变和不可变数据类型. Python 中的数据结构是根据某种方式将数据元素组合 ...
- PAT甲级题分类汇编——序言
今天开个坑,分类整理PAT甲级题目(https://pintia.cn/problem-sets/994805342720868352/problems/type/7)中1051~1100部分.语言是 ...
- python3快速安装升级pip3
一.下载地址: 获取get-pip.py安装文件: 官网链接:https://bootstrap.pypa.io/get-pip.py 百度云链接:https://pan.baidu.com/s/14 ...
- springboot中将日志信息存放在catalina.base中
<?xml version="1.0" encoding="UTF-8"?> <configuration debug="true& ...