element Dropdown组件使用实例分析

今天小编给大家分享一下element 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>

以上就是“element Dropdown组件使用实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。