element Dropdown組件意想不到的坑

Posted on by

去年做的兩個web項目，都用到瞭elementUI，自認為已經比較熟悉瞭，尤其是其中一些常用的組件，比如說今天的主角——Dropdown。

所以，今年項目中，如果再用到的話，應該不會踩坑瞭。畢竟，對它的坑，已經比較瞭解瞭。它常見的坑主要有以下兩個：

1、el-dropdown下拉el-dropdown-item添加點擊事件click沒有反應

踩坑寫法：

<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，已經采用瞭避坑寫法，大概寫法如下：

<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下拉框就是不顯示。

問題到底出現在哪？百思百搜不得其解！

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

仔細對比瞭一下，代碼沒什麼區別，除瞭原來的代碼有兩組Dropdown，現在的隻有一組Dropdown，難道問題出現在這裡。

這時，腦袋中突然浮現出一句話：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>

一試，下拉框正常出來瞭！
問題還真出現在這，以前也經常多個v-if 一起用，也沒問題，為什麼到這個場景中就不行（求大神指教）。

到此這篇關於element Dropdown組件意想不到的坑的文章就介紹到這瞭,更多相關element Dropdown 坑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：