element-ui下拉菜單組件Dropdown的示例代碼

更新時(shí)間：2022年08月16日 09:41:42 作者：camellia

這篇文章主要介紹了element-ui下拉菜單組件Dropdown,本文詳細(xì)給大家介紹了我遇到的一個(gè)最大的坑，通過(guò)結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

項(xiàng)目中使用了element ui的頁(yè)面組件。

在使用dropdown組件的時(shí)候，發(fā)現(xiàn)了我自己的一些問(wèn)題，這里記錄一下，文末有整理好的我自己用的一個(gè)demo。可下載。

基礎(chǔ)的使用方法可以參照官方文檔：

element.eleme.io/#/zh-CN/com…

這里邊給出的解釋還是很全的，只是，剛剛接觸的同學(xué)（比如我），有些地方注意不到，有些坑還得踩一踩。

首先上代碼：

先是html部分：

<div?id='app'?style="margin:50px;">
????????<!--?鼠標(biāo)滑過(guò)顯示下拉列表?這里設(shè)置了觸發(fā)的方式，注意觸發(fā)方式不能使用':'綁定，以及綁定了觸發(fā)選項(xiàng)時(shí)的方法?-->
????????<el-dropdown?trigger="hover"?@command="handleCommand"??>
????????????<span?class="el-dropdown-link?el-input__inner"??style="display:block;width:200px;">
????????????????<!--?沒(méi)有選項(xiàng)的時(shí)候，默認(rèn)顯示的placeholder?-->
????????????????<span?v-if="!position"?style="color:lightslategray">請(qǐng)選擇一個(gè)選項(xiàng)</span>
????????????????<!--?顯示已經(jīng)選擇的選項(xiàng)，目前這里是單選?-->
????????????????<span?v-else>{{position}}</span>
????????????????<!--?下拉菜單選擇框右邊的icon?-->
????????????????<span?style="display:block;float:?right;">
????????????????????<img?src="./icon.png"?alt=""?style="margin-top:7px;">
????????????????</span>
????????????</span>
????????????<el-dropdown-menu?>
????????????????<!--?選擇'請(qǐng)選擇‘這個(gè)選項(xiàng)，他沒(méi)有command這個(gè)屬性，所以選擇他相當(dāng)于，清空已經(jīng)選擇的選項(xiàng)?-->
????????????????<el-dropdown-item>請(qǐng)選擇</el-dropdown-item>
????????????????<!--?選項(xiàng)的數(shù)據(jù)列表循環(huán)，這里的屬性，只有commang必須要使用':'綁定才能使用，這個(gè)坑了我好久，所以，為了不忘記這個(gè)事情，他所有的屬性，不管是否需要綁定，我們都使用':'綁定，這個(gè)總沒(méi)有錯(cuò)?-->
????????????????<el-dropdown-item??v-for="(item,index)?in?options"?:command='item.key'?:divided='true'>
????????????????????{{item.label}}-{{item.key}}
????????????????</el-dropdown-item>
?
????????????</el-dropdown-menu>
????????</el-dropdown>
????</div>

上邊的備注我寫的還算完整，基本上看完了就能明白我的設(shè)計(jì)思想。

這里重點(diǎn)說(shuō)一下我遇到的一個(gè)最大的坑：

組件的command這個(gè)屬性，使用的時(shí)候，必須使用v-bind或者：來(lái)綁定，不然你給他賦變量，他沒(méi)有辦法解析。

其余的屬性，比如：divided（分割線）在使用的時(shí)候，綁不綁定都行。

組件的trigger屬性不能使用v-bind或者：來(lái)綁定，不然會(huì)報(bào)錯(cuò)：

以上兩點(diǎn)一定要注意。

Js部分代碼：

//?我們聲明一個(gè)數(shù)據(jù)對(duì)象，在創(chuàng)建VUE實(shí)例的時(shí)候，綁定到vue的數(shù)據(jù)中，這里的數(shù)據(jù)是響應(yīng)式的，就是當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，頁(yè)面不需要刷新就可以發(fā)生改變。
????var?obj?=?{
????????//?下拉列表顯示的數(shù)據(jù)
????????options:?[{
????????????key:'1',
????????????value:?'選項(xiàng)1',
????????????label:?'黃金糕'
????????},?{
????????????key:'2',
????????????value:?'選項(xiàng)2',
????????????label:?'雙皮奶'
????????},?{
????????????key:'3',
????????????value:?'選項(xiàng)3',
????????????label:?'蚵仔煎'
????????},?{
????????????key:'4',
????????????value:?'選項(xiàng)4',
????????????label:?'龍須面'
????????},?{
????????????key:'5',
????????????value:?'選項(xiàng)5',
????????????label:?'北京烤鴨'
????????}],
????????//?選中項(xiàng)的label
????????position:'',
????};
????//?創(chuàng)建VUE實(shí)例
????var?app?=?new?Vue({
????????el:?'#app',?//?綁定元素
????????data:?obj,
????????methods:?{
????????????/**
?????????????*?@name?選擇選項(xiàng)的時(shí)候觸發(fā)的事件（只能傳遞一個(gè)參數(shù)）?
?????????????*/
????????????handleCommand(command)
????????????{
????????????????var?self?=?this;
????????????????//?如果沒(méi)有傳遞command，那么就是清空選項(xiàng)
????????????????if(!command)
????????????????{
????????????????????self.position?=?'';
????????????????}
????????????????else
????????????????{
????????????????????//?循環(huán)json數(shù)組，我這里的目的是，將你選中的選項(xiàng)的label顯示到框中。
????????????????????for?(var?i?=?0;?i?<?self.options.length;?i++)?
????????????????????{
????????????????????????if?(self.options[i].key?==?command)?
????????????????????????{
????????????????????????????self.position?=?self.options[i].label;
????????????????????????}
????????????????????}
????????????????}
????????????},
????????},
????});

Js部分可能就沒(méi)有什么了，沒(méi)有什么太具體的邏輯，只有一個(gè)顯示。具體邏輯在你使用的時(shí)候，需要根據(jù)自己的實(shí)際情況來(lái)添加。

最終效果如下圖所示：