element Dropdown组件意想不到的坑
作者：HED
本文主要介绍了element Dropdown组件意想不到的坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
去年做的两个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 坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！