iview下拉菜单项遇到的坑

<!--​iview的下拉列表-->

<Dropdown 
v-else-if="spanNubs.col_obj.length>10&&spanNumber.column_layout_obj.col_layout<=24"
                            trigger="click">
          <a href="javascript:void(0)">
               {{$t("space.colView")}}
               <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list" v-for="columnItem in spanNubs.col_obj"
                :class="{tabActive:columnItem.guidId==curSelectedId}"
                 @click.native="colSelected(columnItem.guidId)">
                <span style="color:black">{{columnItem.title}}</span>
         </DropdownMenu>
 </Dropdown>

第一点:选中菜单项时,菜单关闭

点击菜单外的地方关闭菜单项解决办法:

1.trigger="click"

2.去掉<DropdownItem></DropdownItem>标签,直接在<DropdownMenu></DropdownMenu>中写菜单项

第二点:给菜单项目绑定事件(比如@click和@on-click)不起作用

解决办法:1.使用 @click.native

                  2.使用 @on-select    //经测试无效


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview中,原生的下拉菜单并不支持以树形菜单的形式展示。然而,有开发者基于iview编写了一个名为iview-select-tree的组件,可以实现下拉菜单树的功能。这个组件可以用于单选和多选,还支持验证效果。你可以在这个组件的npm地址上找到它的集成方式。\[1\]\[2\] 使用iview-select-tree的方法是首先引入iview库,然后将iview的tree和select进行结合。通过tree的getCheckedNodes方法可以获取选中的节点数组,然后将这个数组传递给select的options绑定的数组,同时将选中的节点的key赋值给select绑定的值。这样就完成了从tree到select的数据绑定。\[3\] 你可以参考这篇博文了解更多关于iview-select-tree的使用和实现的源代码。\[3\] #### 引用[.reference_title] - *1* *2* [iview下拉菜单树的iview-select-tree的使用以及iview-select-tree的实现的源代码](https://blog.csdn.net/linzhefeng89/article/details/105245236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [selectTree单选iview+vue](https://blog.csdn.net/qq_43787947/article/details/126005828)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值