el-dropdown-item,elvuiroll点框架

  el-dropdown-item,elvuiroll点框架

  本文主要介绍了elementUI组件埃尔-下拉菜单的一些坑,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  选择即改变:点击选择哪个,就显示当前的值,页面用户界面显示并伴随钢性铸铁样式的变化。

  重点:v-if和如果,否则的搭配使用,缺一不可。

  

效果图:

  正确的代码如下:

  重要提示:

  我之前使用的全部是控制显示判断,没有搭配如果,否则所以就出现了bug:即只能点击一次,(然后就失效了)就不能继续点击了。

  但是我想要的功能:是能改变之前的选择状态。

  所以,才有了下面的代码优化(逻辑上的优化)。

  div class=" it-after " v-if=简历。电话!=

  p class= it-telphone clamp 1 { resume。电话} }/p

  div class= BTN 3 El-button type= primary icon= El-icon-warning plain @ click= open 3 举报该简历/El-按钮/div

  div class= BTN 3 style= margin-top:5px;

  El-下拉@ command= resumeStateFun

  El按钮type= primary v-if= resume。“状态==0”

  span:id= span _ 简历。简历代码未标记/spani class= El-icon-arrow-down El-icon-right /I

  /el-button

  El-button type= primary v-else-if= resume。状态==1

  span:id= span _ 简历。简历代码已面试/spani class= El-icon-arrow-down El-icon-right /I

  /el-button

  El-button type= primary v-else-if= resume。状态==2

  span:id= span _ 简历。简历代码待面试/spani class= El-icon-arrow-down El-icon-right /I

  /el-button

  El-button type= primary v-else-if= resume。状态==3

  span:id= span _ 简历。简历代码不合适/spani class= El-icon-arrow-down El-icon-right /I

  /el-button

  El-下拉菜单-菜单slot=dropdown

  El-下拉列表项:command= resume。简历代码 _ 0 未标记/El-下拉列表项

  El-下拉列表项:command= resume。简历代码 _ 1 已面试/El-下拉列表项

  El-下拉列表项:command= resume。简历代码 _ 2 待面试/El-下拉列表项

  El-下拉列表项:command= resume。简历代码 _ 3 不合适/El-下拉列表项

  /El-下拉菜单

  /El-下拉列表

  /div

  /div

  

总结:

  需要控制显示和如果,否则搭配使用,(完整的判断逻辑)操作起来,才能让显示效果正常

  到此这篇关于elementUI组件埃尔-下拉菜单(踩坑)的文章就介绍到这了,更多相关元素埃尔-下拉列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: