arco-design-vue的tree组件实现右击事件

news2024/11/25 22:55:31

arco-design-vue的tree组件实现右击事件

业务中需要使用到tree组件,并且还要对tree实现自定义鼠标右击事件。在arco-design-vue的文档中,可以明确的看到,tree组件并没有右击事件的相关回调,那要如何实现呢???
这里提供两种思路:
1、使用插槽,在插槽中对DOM实现contextmenu事件(会有问题,下面会说)
2、使用事件冒泡机制,对tree实现contextmenu事件

思路一:使用插槽对自定义实现contextmenu事件

image.png

本以为这样就万事大吉了,万万没想到测试给我提了一个bug。这个右击事件,“顾尾不顾头”,即在节点前面的空白地方右击无效。

image.png
使用开发者工具看了DOM结构才发现,使用插槽的话,是永远在arco-tree-node节点内,而这个DOM中同时还包括了缩进、间距、内容(插槽所在dom)。这三部分都是有自己的宽度的,所以当右击缩进和间距的时候,右击事件不会触发。所以如果想要当前行不管哪里右击都能触发自定义右击事件的,果断放弃这种方式吧

image.png

思路二:使用冒泡机制,直接将右击事件绑定到tree组件本身上

image.png

查看过arco-design-vue文档的小伙伴都知道,tree组件并没有提供contextmenu相关的回调函数,那怎么办呢?去github上看了,有这个需求的人不止我一个。但是到目前为止,没看到官方宣布提供了啥解决方案。
那怎么办?难道不实现了吗?还是说为了这个功能用其他tree插件来实现??不行,我不甘心啊!!!!
不死心的我终于在事件对象中知道到了“蛛丝马迹”。打印事件对象之后,发现这个事件对象的target属性值,多了两个属性: __vnode 和 __vueParentComponent。我们想要的数据会不会就在这两个属性值里????
通过不断的进行验证,果然验证了我的猜想,数据就藏在__vueParentComponent中。(皇天不负有心人啊,5555…)

image.png

这里我需要说明一下,每个节点的唯一标识我本来使用的是"key",但是这个attrs打印出来中没有这个属性,不光这个属性没有,我定义的节点类型中的title、isLeaf属性也没有。没办法就再加了一个id属性来存储节点的唯一标识值。(我猜测的是,这个attrs只能打印那些不被子节点props定义的属性,可能arco-design-vue的tree内部,所有 TreeNodeData 定义的属性都默认被props接收,所以打印不出来)
好了,到此问题解决了。如果有更好的解决办法,欢迎在评论区一起他讨论呀。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/973582.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

10 和为K的子数组

和为K的子数组 题解1 前缀和(哈希表)题解2 暴力枚举(没过) 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的 连续子数组的个数 。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例…

字节二面:如果高性能渲染十万条数据?

前言 最近博主在字节面试中遇到这样一个面试题,这个问题也是前端面试的高频问题,作为一名前端开发工程师,我们虽然可能很少会遇到后端返回十万条数据的情况,但是了解掌握如何处理这种情况,能让你对前端性能优化有更深的…

【力扣每日一题】2023.9.4 序列化和反序列化二叉搜索树

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一棵搜索二叉树,要我们将这棵二叉树转变为字符串,同时我们需要根据字符串再变回二叉树,具体…

外贸开发信这么写,效果更好

很多小伙伴说好像现在无论是精准的发送开发信还是群发邮件,似乎效果都没有以往那么好, 虽然现在的开信已经从简单的纯文字书写改到了图文并茂,也从只介绍自己公司的产品实力晋升到对目标客户的分析探寻, 虽然找到了很多对口的邮…

智慧农旅数字农旅

智慧农旅|数字农旅|智慧文旅|智慧农旅平台|数字农旅平台|产业大脑|农业产业大脑|智慧农业|农业可视化|高标准农田|高标准产业园|数字农业大脑|大棚可视化|大棚物联管控|大棚数字孪生管控|大田物联管控|数字农业|数字乡村|数字乡村可视化|数字农业研学|数字大棚|智慧大棚|农业数…

RHCA之路---EX280(6)

RHCA之路—EX280(6) 1. 题目 Create an application greeter in the project samples which uses the Docker image registry.lab.example.com/openshift/hello-openshift so that it is reachable at the following address only: https://greeter.apps.lab.example.com (Not…

QTday1基础

作业 一、做个QT页面 #include "hqyj.h"HQYJ::HQYJ(QWidget *parent)//构造函数定义: QWidget(parent)//显性调用父类的有参构造 {//主界面设置this->resize(540,410);//设置大小this->setFixedSize(540,410);//设置固定大小this->setWindowIcon(QIcon(&q…

算法 数据结构 双向环形链表 手撸环形链表 环形链表实现容器 环形链表添加修改删除获取大小 环形链表实现自定义容器 手撸容器 双向环形哨兵链表 数据结构(六)

1. 环形链表: 2. 建议先不要看我写得自己先实现下,只将Node内部类复制自己命名得容器内, 实现方法: a. add方法(添加到头部,尾部添加,指定位置添加) b. get方法(获取首部…

中小型ISR无人机海战场的运用与关键技术分析

源自:航空兵器 作者:温亮, 孙晓路, 卫国华, 吕建平, 王波 摘 要 关键词 无人机, 情报侦察监视, 海战场, 发射与回收, 自主控制, 任务载荷 引 言 1 国内外海上中小型无人机发展现状 表1 各国的部分中小型无人机 2 中小型ISR无人机在海战场的运用 2…

ModaHub魔搭社区专访百度智能云李莅:做 AI native 的向量数据库有哪些技术难点?

ModaHub魔搭社区:那这种传统的数据库加向量插件的方式和 AI native 的向量数据库两者之间的区别是什么?做 AI native 的向量数据库有哪些技术难点? 李莅:向量检索算法是向量领域最核心的技术挑战。目前,主流的算法是基…

无涯教程-JavaScript - DAY函数

描述 DAY函数返回日期的日期,由序列号表示。日期以1到31之间的整数形式给出。 语法 DAY (serial number)争论 Argument描述Required/Optionalserial number 您要查找的日期。 应该使用DATE函数或其他公式或函数的输出输入日期。 如,在2008年5月的第23天使用DATE(2008,5,23)…

计算准确率sklearn.accuracy_score

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算准确率 sklearn.accuracy_score [太阳]选择题 请问关于以下代码最后输出结果的是? from sklearn.metrics import accuracy_score yp [1, 0, 1, 1] y [1, 0, 0, 1] print(&qu…

2023年9月广州/深圳软考高级信息系统项目管理师认证报名

信息系统项目管理师是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目之一,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资…

16-MyCat

一 Mycat概述 1 什么是Mycat 什么是Mycat Mycat是数据库中间件,所谓数据库中间件是连接Java应用程序和数据库中间的软件。 为什么要用Mycat 遇到问题: Java与数据库的紧耦合高访问量高并发对数据库的压力读写请求数据不一致 2 Mycat与其他中间件区别 目…

【校招VIP】产品思维考察之产品设计

考点介绍: 产品经理是那个连接用户需求、团队资源与技术可能性的人,而产品经理思维就是产品思维,做产品首先要具有把握关键点的能力。 产品思维考察之产品设计-相关题目及解析内容可点击文章末尾链接查看! 一、考点题目 1. 小红书准备做一…

2023年9月CSPM-3国标项目管理中级认证报名,当然弘博创新

CSPM-3中级项目管理专业人员评价,是中国标准化协会(全国项目管理标准化技术委员会秘书处),面向社会开展项目管理专业人员能力的等级证书。旨在构建多层次从业人员培养培训体系,建立健全人才职业能力评价和激励机制的要…

聚观早报|多邻国推出进阶英文课程;电动汽车成本将高于燃油车

【聚观365】9月5日消息 多邻国即将推出进阶英文课程 未来电动汽车成本仍将高于燃油车 戴尔科技2024财年第二季度营收229亿美元 现代汽车电动汽车销量在8月份环比继续下滑 马斯克称将用X数据训练AI 多邻国即将推出进阶英文课程 语言学习平台多邻国宣布,为了满…

moment.js——实现日期格式的转换——常用api汇总

之前遇到关于日期的转换问题,我常用的解决方法就是通过new Date()进行时间的处理。 其实很多日期的处理,都可以通过moment来直接进行处理,简单方便。 下面的操作都是在引入moment.js或者npm install moment之后的写法。 标准日期格式转化为…

C++信息学奥赛1186:出现次数超过一半的数

#include <bits/stdc.h> using namespace std; int main() {int n;cin >> n; // 输入一个整数nint arr[n]; // 定义一个长度为n的整型数组for (int i 0; i < n; i){cin >> arr[i]; // 输入数组元素}int a, max; // 定义变量a和maxmax a 0; // 初始化ma…

06. 小数和小数精度丢失

1. 将0.1累加100次也得不到10 #include <stdio.h>int main() {float sum 0; // 0.1相加100次for (int i 1; i < 100; i) {sum 0.1; } // 显示结果printf("%f\n", sum); }打印结果&#xff1a; 10.000002以上代码没有错&#xff0c;计算机也没…