element Dropdown组件意想不到的坑

目录
  • 1、el-dropdown下拉el-dropdown-item添加点击事件click没有反应
  • 2、el-table组件中使用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 坑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • elementUI组件el-dropdown(踩坑)

    elementUI组件el-dropdown(踩坑)

    选择即改变:click选择哪个,就显示当前的值,页面UI显示并伴随css样式的变化. 重点:v-if 和 v-else-if 的搭配使用,缺一不可. 效果图: 正确的代码如下: 重要提示: 我之前使用的全部是v-if判断,没有搭配v-else-if,所以就出现了bug:即只能点击一次,(然后就失效了)就不能继续点击了. 但是我想要的功能:是能改变之前的选择状态. 所以,才有了下面的代码优化(逻辑上的优化). <div class="it-after" v-if=" re

  • Element Dropdown下拉菜单的使用方法

    组件- 下拉菜单 基础用法 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</

  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    目录 需求说明: 实现步骤: 本文主要讲述:自定义树形控件<el-tree> 需求说明: Element UI 官网提供的树形控件包含基础的.可选择的.自定义节点内容的.带节点过滤的以及可拖拽节点的树形结构 如下: 我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面:并且在每个文件夹前添加自定义图标. 实现效果: 实现步骤: 1.使用插槽(slot) <el-col :span="4" :xs="24"> &

  • vue+element搭建后台小总结 el-dropdown下拉功能

    vue+element搭建后台小总结 el-dropdown下拉功能

    本文实例为大家分享了el-dropdown下拉功能的具体代码,供大家参考,具体内容如下 功能:点击el-dropdown 下拉 下拉的数据 从后台获取 遍历到界面上 且多个el-dropdown下拉 共用 一个 @command 事件  @command="handleCommand" 上代码部分  html //全部城市 下拉 //handleCommand下拉事件 all_city点击后显示在上面的数据 item.label下拉的数据 :command点击传的值 用flag来区分同

  • ElementUI中的el-dropdown传入多参数的实现方法

    ElementUI中的el-dropdown传入多参数的实现方法

    最近工作中因为业务中按钮的增多,导致页面排版按钮过多,页面不够美观,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(把多个按钮整合到了一起,下拉实现) 但是ElementUi官方文档中的handleCommand方法只允许接入一个参数,这个参数用于触发你选择的是哪一个选项.而我们实际中还需要传入一个当前行数(如果和我一样,也是用table显示数据的话)的对象进去,后面要使用这个对象的某些字段传给后台进行一些增删改查的操作. ElementUi官方文档中el-dropdown的样例

  • element Dropdown组件意想不到的坑

    目录 1.el-dropdown下拉el-dropdown-item添加点击事件click没有反应 2.el-table组件中使用Dropdown,无法显示下拉框 去年做的两个web项目,都用到了elementUI,自认为已经比较熟悉了,尤其是其中一些常用的组件,比如说今天的主角——Dropdown. 所以,今年项目中,如果再用到的话,应该不会踩坑了.毕竟,对它的坑,已经比较了解了.它常见的坑主要有以下两个: 1.el-dropdown下拉el-dropdown-item添加点击事件click没

  • vue使用Element el-upload 组件踩坑记

    vue使用Element el-upload 组件踩坑记

    目录 一.基本使用 二.图片数量控制 三.图片格式限制/可以选中多张图片 补充:在vue项目中使用element-ui的Upload上传组件 一.基本使用 最近研究了一下 el-upload组件 踩了一些小坑  写起来大家学习一下 很经常的一件事情 经常会去直接拷贝 element的的组件去使用 但是用到上传组件时 就会遇到坑了 如果你直接去使用upload 你肯定会遇见这个错误 而且 上传的图片 可能会突然消失  这时候如果你没有接口  你是完全不知道为什么移除的  所以 无接口时 只能去猜测

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示 分析:当点击btn时,modal框的确弹出来了,但

  • vue+element树组件 实现树懒加载的过程详解

    一.页面样式 二.数据库 三.前端页面代码 <template> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-tree> </template> <script> export default { data () { return { props: { label: 'name', children: 'zones',

  • 使用vue-cli导入Element UI组件的方法

    首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法,希望对大家有所帮助,如果大家有任何疑

  • element el-tree组件的动态加载、新增、更新节点的实现

    最近在根据需求,需要用到树形控件,ele 的封装了树形控件正好拿来用,用的途中遇到一些问题就总结下,哈哈哈 说正事,我需要动态的加载出整个树形结构,刚好就有 符合需求,啦啦啦 用的时候出现问题了,我要如何把后台返回个我的数据加载到表里呢,上菜... <template> <el-tree empty-text="暂无数据" :expand-on-click-node="false" :props="defaultProps" :

  • 基于Element的组件改造的树形选择器(树形下拉框)

    前言:由于做项目需要一个树形选择器,项目用的也是element-ui框架,然而它自带的选择器组件没有树形选项,又不想引入其他的框架组件,于是自己利用el-select和el-tree改造了一个,感觉还挺好用的,就封装成了一个组件,如下图: element-ui的el-select组件的选项只能是列表形式: 改造后的树形选择器: 简介:此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的,其解决了原el-select组件的选项列表不能是树形的问题,集合

  • Vant Weapp组件踩坑:picker的初始赋值解决

    在使用vant的picker组件时,我希望有在页面加载时向数据库获取值来设置picker的默认值.开始我使用官方文档中的default-index属性,并在onLoad方法中进行this.setData().但是这样做picker的默认索引还是0. 于是我又将setData放入onShow().onReady()方法,均不奏效.(我真的不知道为什么,新建一个空白页面测试也是这样) 继而我查看官方文档,发现picker有实例方法setIndexes(),于是尝试. 然而我在onLoad().onR

随机推荐