Naive Ui树形选择框父节点展开问题

问题描述

        n-tree-select在选择框中的树形列表中,通过节点前的展开图标展开父节点时,同时触发了选择事件,导致选择框收起,同时父节点被选择。

        经过调试和源码分析,原因出在Naive TreeNode.js中使用的utils库:seemly中的happensIn工具函数,这个函数用于检测事件(如点击事件)是否发生在当前元素的某个子孙元素上(根据个人理解,类似于起到阻止事件冒泡的作用)。主要原因是happensIn函数内部的事件目标对象e.target和e.currentTarget的识别、处理及使用。

解决

将seemly库的版本从0.3.6升至0.3.8即可正常使用n-tree-select组件。

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue树形复选是一种常见的UI组件,可以用于展示树形结构的数据,并支持多选功能。Naive-UI是一个基于Vue的UI组件库,提供了丰富的组件和样式,可以方便地实现树形复选功能。 下面是一个使用Naive-UI组件库实现Vue树形复选的示例: ```vue <template> <div> <n-tree :data="treeData" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" show-checkbox @check-change="handleCheckChange" ></n-tree> </div> </template> <script> import { NTree } from 'naive-ui' export default { components: { NTree }, data() { return { treeData: [ { label: 'Node 1', children: [ { label: 'Node 1-1', children: [ { label: 'Node 1-1-1' }, { label: 'Node 1-1-2' } ] }, { label: 'Node 1-2' } ] }, { label: 'Node 2', children: [ { label: 'Node 2-1' }, { label: 'Node 2-2' } ] } ], defaultExpandedKeys: ['Node 1'], defaultCheckedKeys: ['Node 1-1-1'] } }, methods: { handleCheckChange(checkedKeys) { console.log('Checked keys:', checkedKeys) } } } </script> ``` 在上面的示例中,我们使用了Naive-UI的NTree组件来展示树形数据。通过设置`data`属性传入树形数据,`default-expanded-keys`属性设置默认展开的节点,`default-checked-keys`属性设置默认选中的节点。同时,我们还设置了`show-checkbox`属性来显示复选,并通过`check-change`事件监听复选的变化。 你可以根据自己的需求修改`treeData`、`defaultExpandedKeys`和`defaultCheckedKeys`来适配你的数据和默认选项。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值