别问,问就是今天是1024,混个勋章

el-select介绍
- 开发环境
- Select Attributes(参数介绍)
select各适用场景介绍
- 使用最广泛的基础单选
- 有禁用选项的选择框
- 选择框禁用状态
- 可清空单选选择框
- 基础多选,设置多选项
- 自定义模板,自定义选项
- 分组选择框
- 可搜索的选择框
- 选择框可创建新条目
- 当无搜索项时显示信息
- 其余的有可能用到的
没什么很难的了,都一看就会,element-UI就这样

el-select介绍

现在做项目的时候经常用到vue-element-UI,因为作为一个java开发者,这玩意确实很简单,很适合新手或者对前端框架技术了解不深入的开发人员.而且,最关键的是今天有勋章拿,左看右看没有什么拿的出手要写的,就去element组件库找了select这个组件介绍一下,把所有属性都实验下,方便大家以后开发,也方便了我,因为我也找过怎么玩的,没什么可参考的东西,或者是我没找到,那就自己随便来一个吧!

开发环境

没什么特殊的开发环境,引入element-UI组件库就行了,可以git下载,也可以使用在线链接.

Select Attributes(参数介绍)

很明显,每个都是大宝贝

参数	说明	类型	可选值	默认值
value / v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	medium/small/mini	—
clearable	是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
autocomplete	select input 的 autocomplete 属性	string	—	off
auto-complete	下个主版本弃用	string	—	off
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用 boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字，也可以使用slot="empty"设置	string	—	无匹配数据
no-data-text	选项为空时显示的文字，也可以使用slot="empty"设置	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	—	false
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	—	true
automatic-dropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	boolean	—	false

select各适用场景介绍

下面结合以上参数介绍各种使用类型

使用最广泛的基础单选

先来一行标准选择框代码
el-row —行元素.
el-col —行宽示例为宽度12.
el-form-item —行信息这一行的名字叫示例.
el-select —指定选择框 v-model是绑定的值,选择的label值就会存储进v-model指定的value中.
el-option —元素选项 label是选中的值,value是相应显示的信息.

<el-row>
<el-col :span="12">
<el-form-item label="示例"><el-select v-model="value"><el-option label="1" value="燕奶粥"></el-option><el-option label="2" value="手抓饼"></el-option><el-option label="3" value="炸鸡柳"></el-option></el-select>
</el-form-item>
</el-col>
</el-row>

展示:

有禁用选项的选择框

自定义的选项在option中设置disabled就可以了,

<el-select v-model="value" ><el-option label="燕奶粥" value="1"></el-option><el-option label="手抓饼" value="2" disabled></el-option><el-option label="炸鸡柳" value="3"></el-option>
</el-select>

非自定义的选项可以在元素行插入disabled这个参数,在遍历的时候显示就可以了.这个我没实验,逻辑上没问题

 <el-optionv-for="item in options":key="item.value":label="item.label":value="item.value":disabled="item.disabled"></el-option>

选择框禁用状态

跟上一个一毛一样,把disabled写在el-select中即可

 <el-select v-model="formData.demo"  disabled><el-option label="燕奶粥" value="1"></el-option><el-option label="手抓饼"  value="2" ></el-option><el-option label="炸鸡柳" value="3" ></el-option>
</el-select>

可清空单选选择框

为el-select设置clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。

 <el-select v-model="formData.demo" clearable><el-option label="燕奶粥" value="1"></el-option><el-option label="手抓饼"  value="2" ></el-option><el-option label="炸鸡柳" value="3" ></el-option>
</el-select>

基础多选,设置多选项

为el-select设置multiple属性即可启用多选，此时v-model的值为当前选中值所组成的数组。

 <el-select v-model="formData.demo" multiple><el-option label="燕奶粥" value="1"></el-option><el-option label="手抓饼"  value="2" ></el-option><el-option label="炸鸡柳" value="3" ></el-option>
</el-select>

默认情况下选中值会以 Tag 的形式展现，你也可以设置collapse-tags属性将它们合并为一段文字。
placeholder 站位符–选项框提示信息

<el-selectv-model="value2"multiplecollapse-tagsstyle="margin-left: 20px;"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>

自定义模板,自定义选项

咱们一般显示选项有需要显示数据库查询信息的需求,这样我们可以自定义设置选项格式

<el-select v-model="formData.parentMenuId" placeholder="请选择主菜单"  clearable filterable no-match-text="无搜索项"><el-option v-for="menu in menus" :key="menu.id" :label="menu.name" :value="menu.id"><span style="float: left">{{ menu.name }}</span><span style="float: right">{{ menu.path }}</span></el-option></el-select>

比如我的回显菜单menu,使用ajax获取数据库信息

//查询主菜单信息
axios.post("/menu/findmenu.do").then((res)=>{if (res.data.flag){this.menus=res.data.data;} else {this.$message.error(res.data.message);}
});

返回值为

[
{
id: 1
name: "会员管理"
path: "2"
},
{
id: 2
name: "预约管理"
path: "3"
},
{
id: 3
name: "健康评估"
path: "4"
},
{
id: 4
name: "统计分析"
path: "5"
},
{
id: 5
name: "系统设置"
path: "6"
}
]

我设置回显name和path,value值为id,选择后会赋值给v-model绑定值,显示值label为name,选择后选择框上显示菜单名称

分组选择框

备选框进行分组管理
使用el-option-group标签设置分组

<el-select v-model="formData.demo"><el-option-group label="热门餐"><el-option label="炸串夹饼" value="4"></el-option><el-option label="煎饼果子"  value="5" ></el-option></el-option-group><el-option-group label="一般餐"><el-option label="燕奶粥" value="1"></el-option><el-option label="手抓饼"  value="2" ></el-option><el-option label="炸鸡柳" value="3" ></el-option></el-option-group>
</el-select>

可搜索的选择框

这个很简单,只需要在el-select中加入filterable属性即可.
为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

<el-select v-model="formData.parentMenuId" placeholder="请选择主菜单" filterable ><el-option v-for="menu in menus" :key="menu.id" :label="menu.name" :value="menu.id"><span style="float: left">{{ menu.name }}</span><span style="float: right">{{ menu.path }}</span></el-option>
</el-select>

可设置ajax,当点击时直接通过ajax连接数据库查询,实现远程检索

ajax 返回值为

[
{
id: 1
name: "会员管理"
path: "2"
},
{
id: 2
name: "预约管理"
path: "3"
},
{
id: 3
name: "健康评估"
path: "4"
},
{
id: 4
name: "统计分析"
path: "5"
},
{
id: 5
name: "系统设置"
path: "6"
}
]

选择框可创建新条目

使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。

<el-select v-model="formData.parentMenuId" placeholder="请选择主菜单"
filterable allow-create multiple default-first-option ><el-option v-for="menu in menus" :key="menu.id" :label="menu.name" :value="menu.id"><span style="float: left">{{ menu.name }}</span><span style="float: right">{{ menu.path }}</span></el-option>
</el-select>

当无搜索项时显示信息

就是一个提示信息显示

<el-select v-model="formData.parentMenuId" placeholder="请选择主菜单"
filterable allow-create multiple default-first-option no-match-text="无搜索项,重新搜索"><el-option v-for="menu in menus" :key="menu.id" :label="menu.name" :value="menu.id"><span style="float: left">{{ menu.name }}</span><span style="float: right">{{ menu.path }}</span></el-option>
</el-select>

其余的有可能用到的

自己看吧,参数表介绍的特清楚

没什么很难的了,都一看就会,element-UI就这样

2¹⁰
勋章到手,拜拜

element_UI select选择框深入解析相关推荐

AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
select选择框实现跳转
select选择框实现跳转零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
纯CSS调整select选择框高度，兼容IE/Firefox/Opera/Safair/Chrome
在IE下直接用height.border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边 ...
Antd点击select选择框，页面滚动，选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的时间:2015-07-17 项目:甘肃银行-手机银行问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...
AngularJS Select(选择框)
在AngularJS中可以使用数组或对象创建一个下拉列表对象选项. 1.使用ng-options创建选择框 <div ng-app="my" ng-controller=&q ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...
select选择框变得可以输入、编辑
一.可编辑的select 按回车键输入新内容,按DEL删除选中内容<br> <body bgcolor="#fef4d9" οnlοad="s1.foc ...
vue中select选择框的监听事件
template模板: <el-select v-model="valueClass" placeholder="请选择学生" class="s ...

element_UI select选择框深入解析