I worked on two Web projects in the last year that used elementUI and thought I was familiar with it, especially some of the most common components, such as Dropdown, today’s hero.

So, in this year’s project, if I use it again, I don’t think I’m going to step on any pits. After all, we already know a lot about its pits. Its common pits are mainly the following two:

1, el-dropdown drop el-dropdown-item add click event click no response

Step pit writing:

<el-dropdown-item @click="remoToken"> out of < / el - dropdown can - item >Copy the code

Avoid pit writing:

<el-dropdown-item @click.native="remoToken"> out of < / el - dropdown can - item >Copy the code

2. When the El-Table component uses Dropdown, the drop-down box cannot be displayed

Step pit writing:

<el-table-column>
  <el-dropdown><el-dropdown>
<el-table-column>
Copy the code

Avoid writing the pit

<el-table-column>
  <template slot-scope="scope">
    <el-dropdown><el-dropdown>  
  </template>
<el-table-column>
Copy the code

But yesterday, I stumbled into an unexpected hole with the Dropdown component!

Here’s the thing.

Dropdown is also used in the el-table component, and has been used to avoid the pit.

<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 "> Enter the interview </el-dropdown-item> <el-dropdown-item command=" B "> enter the interview </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 "> Entry </el-dropdown-item> </el-dropdown-menu> <el-dropdown>  </template> <el-table-column>Copy the code

However, no matter how much you click on it, the Dropdown box doesn’t show up.

What exactly is the problem? Best search is not the answer!

Later, I commented out my own code and replaced it with a set of sample code from the official documentation. Suddenly, the drop-down box came out! Why is that?

After a close comparison, the code is no different, except that the original code had two sets of dropdowns, and now there is only one set of dropdowns.

At this point, a sentence suddenly comes to mind: V-if, V-else -if and V-else are best used together to form a complete logical judgment.

Change the code to look like this:

<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>
Copy the code

Try it, the dropdown box came out normally!

The problem is that multiple V-Ifs have often been used together before, so why not in this scenario?

Well, another day of trampling.