element_UI select选择框深入解析

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-option
      v-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-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-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¹⁰
勋章到手,拜拜