耀极客论坛

 找回密码
 立即注册
查看: 417|回复: 0

elementUI组件el-dropdown(踩坑)

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 01:48:06 | 显示全部楼层 |阅读模式
  本文主要介绍了elementUI组件el-dropdown的一些坑,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  选择即改变:click选择哪个,就显示当前的值,页面UI显示并伴随css样式的变化。
  重点:v-if 和 v-else-if 的搭配使用,缺一不可。
效果图:

  正确的代码如下:
  1. 重要提示:
  2. 我之前使用的全部是v-if判断,没有搭配v-else-if,所以就出现了bug:即只能点击一次,(然后就失效了)就不能继续点击了。
  3. 但是我想要的功能:是能改变之前的选择状态。
  4. 所以,才有了下面的代码优化(逻辑上的优化)。
复制代码
  1. ‹div class="it-after" v-if=" resume.phone != ''">
  2. ‹p class="it-telphone clamp1">{{resume.phone}}‹/p>
  3. ‹div class="btn3">‹el-button type="primary" icon="el-icon-warning" plain @click="open3">举报该简历‹/el-button>‹/div>
  4. ‹div class="btn3">
  5. ‹el-dropdown @command="resumeStateFun">
  6. ‹el-button type="primary" v-if="resume.status==0">
  7. ‹span :id="'span_'+resume.resumeCode">未标记‹/span>‹i class="el-icon-arrow-down el-icon--right">‹/i>
  8. ‹/el-button>
  9. ‹el-button type="primary" v-else-if="resume.status==1">
  10. ‹span :id="'span_'+resume.resumeCode">已面试‹/span>‹i class="el-icon-arrow-down el-icon--right">‹/i>
  11. ‹/el-button>
  12. ‹el-button type="primary" v-else-if="resume.status==2">
  13. ‹span :id="'span_'+resume.resumeCode">待面试‹/span>‹i class="el-icon-arrow-down el-icon--right">‹/i>
  14. ‹/el-button>
  15. ‹el-button type="primary" v-else-if="resume.status==3">
  16. ‹span :id="'span_'+resume.resumeCode">不合适‹/span>‹i class="el-icon-arrow-down el-icon--right">‹/i>
  17. ‹/el-button>
  18. ‹el-dropdown-menu slot="dropdown">
  19. ‹el-dropdown-item :command="resume.resumeCode+'_0'">未标记‹/el-dropdown-item>
  20. ‹el-dropdown-item :command="resume.resumeCode+'_1'">已面试‹/el-dropdown-item>
  21. ‹el-dropdown-item :command="resume.resumeCode+'_2'">待面试‹/el-dropdown-item>
  22. ‹el-dropdown-item :command="resume.resumeCode+'_3'">不合适‹/el-dropdown-item>
  23. ‹/el-dropdown-menu>
  24. ‹/el-dropdown>
  25. ‹/div>
  26. ‹/div>
复制代码
总结:
  需要 v-if 和 v-else-if 搭配使用,(完整的判断逻辑)操作起来,才能让显示效果正常
  到此这篇关于elementUI组件el-dropdown(踩坑)的文章就介绍到这了,更多相关element el-dropdown内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:25 , Processed in 0.072675 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表