快捷導航

element Dropdown組件意想不到的坑

更新時間：2022年01月24日 16:09:04 作者：HED

本文主要介紹了element Dropdown組件意想不到的坑，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1、el-dropdown下拉el-dropdown-item添加點擊事件click沒有反應(yīng)

踩坑寫法：

<el-dropdown-item @click="remoToken">退出</el-dropdown-item>

避坑寫法：

<el-dropdown-item @click.native="remoToken">退出</el-dropdown-item>

2、el-table組件中使用Dropdown，無法顯示下拉框

踩坑寫法：

<el-table-column>
? <el-dropdown><el-dropdown>
<el-table-column>

避坑寫法

<el-table-column>
? <template slot-scope="scope">
? ? <el-dropdown><el-dropdown> ?
? </template>
<el-table-column>

但是，昨天，在使用Dropdown組件時，還是踩了一個意想不到的坑！
事情是這樣的。

也是在el-table組件中使用Dropdown，已經(jīng)采用了避坑寫法，大概寫法如下：

<el-table-column>
? <template slot-scope="scope">
? ? <el-dropdown v-if="status === 1">
? ? ?<a>{{activeSelect}}<i class="el-icon-arrow-down el-icon--right"></a>
? ? ?<el-dropdown-menu slot="dropdown">
? ? ? ?<el-dropdown-item command="a">進入面試</el-dropdown-item>?
? ? ? ?<el-dropdown-item command="b">入職</el-dropdown-item>
? ? ?</el-dropdown-menu>
? ? <el-dropdown> ?
? ? <el-dropdown v-if="status === 2">
? ? ?<a>{{activeSelect}}<i class="el-icon-arrow-down el-icon--right"></a>
? ? ?<el-dropdown-menu slot="dropdown">
? ? ? ?<el-dropdown-item command="b">入職</el-dropdown-item>
? ? ?</el-dropdown-menu>
? ? <el-dropdown>?
? </template>
<el-table-column>

可是，不管怎么點擊，Dropdown下拉框就是不顯示。

問題到底出現(xiàn)在哪？百思百搜不得其解！

后來沒辦法，就把自己的代碼注釋掉，換上了一組官方文檔中的示例代碼。突然，下拉框出來了！這是為什么？

仔細對比了一下，代碼沒什么區(qū)別，除了原來的代碼有兩組Dropdown，現(xiàn)在的只有一組Dropdown，難道問題出現(xiàn)在這里。

這時，腦袋中突然浮現(xiàn)出一句話：v-if 、v-else-if 和v-else 最好搭配使用，形成完整的邏輯判斷。

果斷把代碼改成如下：

<el-table-column>
? <template slot-scope="scope">
? ? <el-dropdown v-if="status === 1">
? ? <el-dropdown> ?
? ? <el-dropdown v-else-if="status === 2">
? ? <el-dropdown>?
? </template>
<el-table-column>

一試，下拉框正常出來了！
問題還真出現(xiàn)在這，以前也經(jīng)常多個v-if 一起用，也沒問題，為什么到這個場景中就不行（求大神指教）。

到此這篇關(guān)于element Dropdown組件意想不到的坑的文章就介紹到這了,更多相關(guān)element Dropdown 坑內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: