Select 选择器

基础用法

 <el-select v-model="val1" placeholder="请输入">
<el-option v-for="item in options" :label="item.value" :value="item.key" :disabled="item.disabled">
</el-option>
</el-select> options: [
{key: "选项一", value: "苹果"},
{key: "选项二", value: "华为"},
{key: "选项三", value: "Vivo"},
{key: "选项四", value: "OPPO", disabled:true}, ],
val1: ''

基础选择器

如果 disabled 放在 <el-option> 中,则此选项不可用;若 disabled 放在 <el-select> 中,则整个选择器不可用

可清空单选

为 <el-select> 设置 clearable 属性,可将选择器清空(仅限于单选)

多选

为 <el-select> 设置 multiple 属性,v-model 的值为此时选中值组成的数组

 <el-select v-model="val3" placeholder="请输入" multiple>
<el-option v-for="item in options" :label="item.value" :value="item.key">
</el-option>
</el-select> options: [
{key: "选项一", value: "苹果"},
{key: "选项二", value: "华为"},
{key: "选项三", value: "Vivo"},
{key: "选项四", value: "OPPO", disabled:true}, ],
val3: [],

基础多选

自定义模板

自定义的 HTML 文档直接插入到 <el-option> 中

 <el-select v-model="val4" placeholder="请输入">
<el-option v-for="item in options" :label="item.value" :value="item.key">
<span>{{ item.value }}</span><span style="float:right">{{ item.key }}</span>
</el-option>
</el-select>
options: [
{key: "apple", value: "苹果"},
{key: "huawei", value: "华为"},
{key: "vivo", value: "Vivo"},
{key: "oppo", value: "OPPO"}, ],
val4: '',

自定义模板

分组

<el-option-group> 对备选项进行分组,他的 label 属性为分组名。

<tips: 注意 group 与 option 两次循环逻辑>

 <el-select v-model="val5" clearable>
<el-option-group v-for="item in options2" :label="item.label" :key="item.label">
<el-option v-for="city in item.cities" :label="city.label" :value="city.value"></el-option>
</el-option-group>
</el-select> options2:[
{label: "热门城市",cities:[{value: "shanghai", label: "上海"}, {value: "guangzhou", label: "广州"}]},
{label: "城市名称",cities:[{value:"zhengzhou", label: "郑州"}, {value: "wuhan", label: "武汉"}, {value:"chengdu", label: "成都"}]}
],

分组

elementUI 学习入门之 Select 选择器的更多相关文章

  1. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  2. elementUI 学习入门之 input 输入框

    基础用法 <el-input v-model="input1" palcehoder="请输入"></el-input> var Mai ...

  3. elementUI 学习入门之 inputNumber 计数器

    InputNumber 计数器 基础用法 <el-input-number v-model="num2"></el-input-number> v-mode ...

  4. elementUI 学习入门之 checkbox 复选框

    CheckBox 复选框 与单选框基本类似.如:按钮样式.带边框.复选框按钮大小. eg: <template> <el-checkbox-group v-model="s ...

  5. elementUI 学习入门之 Button 按钮

    基础按钮用法 按钮分为:默认按钮.朴素按钮(plain).圆角按钮(round).圆形按钮(circle).eg: <el-button plain>朴素按钮</el-button& ...

  6. elementUI 学习入门之 container 布局容器

    Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el- ...

  7. elementUI 学习入门之 layout 布局

    layout 布局 通过基础的 24 分栏,可进行快速布局 基础布局 使用单一分栏创建基础的栅格布局, 通过 span 属性指定每栏的大小 <el-col :span="8" ...

  8. OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)

    1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...

  9. 6. oracle学习入门系列之六 模式

    oracle学习入门系列之六 模式 上篇咱们学习记录了ORACLE数据库中的数据库结构.内存结构和进程等.篇幅 蛤蟆感觉偏多了.这次要休整下,每次笔记不宜太多,不然与书籍有何差别. 我们要保证的是每次 ...

随机推荐

  1. SVN 使用笔记

    SVN中检出 和 导出 的区别 检出得到的文件夹中,是受SVN客户端控制的,对其进行文件或文件夹的增删改操作都会被SVN客户端识别出来,对其可以进行update.commit操作.其中含有.svn隐藏 ...

  2. C#(.net)水印图片的生成

    /* * *    使用说明: * 建议先定义一个WaterImage实例 * 然后利用实例的属性,去匹配需要进行操作的参数 * 然后定义一个WaterImageManage实例 * 利用WaterI ...

  3. R5—字符串处理/正则表达式

    R通常被用来进行数值计算比较多,字符串处理相对较少,而且关于字符串的函数也不多,用得多的就是substr.strsplit.paste.regexpr这几个了.实际上R关于字符串处理的功能是非常强大的 ...

  4. centos6安装elasticsearch6.0

    环境准备 1台centos6操作系统主机,关闭selinux及iptables官方下载elasticsearch6.0软件包:https://artifacts.elastic.co/...官方下载j ...

  5. Windows上安装QT4后更改MinGW的路径

    在windows上安装使用MinGW的QT4时,并不会一起安装MinGW. 在安装过程中,会让你指定已经安装的MinGW的路径. 当你使用QT4时,将使用你指定的MinGW的路径下的g++来编译构建程 ...

  6. ubuntu环境下eclipse的安装以及hadoop插件的配置

    ubuntu环境下eclipse的安装以及hadoop插件的配置 一.eclipse的安装 在ubuntu桌面模式下,点击任务栏中的ubuntu软件中心,在搜索栏搜索eclipse 注意:安装过程需要 ...

  7. HDU 1176 排列2 全排列

    解题报告:给出四个数,然后要你把这四个数组合成的各不相同的四位数按照从小到大的顺序输出来,然后如果最高位是0的话不能输出来,还有最高位是数字如果一样的话,则放在同一行输出. 本来是个比较简单的生成全排 ...

  8. OpenCV3.4.1+vs2017安装及配置

    一.OpenCV3.4.1下载与安装 1.OpenCV3.4.1下载 可以去OpenCV官网上下载http://opencv.org/ 然后找到对应的系统环境就可以下载了,当然了官网上下载会很慢,推荐 ...

  9. Shell编程之运算符和环境变量配置文件

    一.shell运算符:    declare命令:         declare    -i 变量名     #声明变量        eg. movie[o]=dzp     #定义数组      ...

  10. JavaScript数组的概念

    数组 1.数组是什么?   数组就是一组变量存放在里面就是数组.   例如:var list=['apple','goole','alibaba',520]   (1.这些数据有一些相关性的.   ( ...