Vue2:el-tree用scope slot为每一个节点添加一个鼠标悬浮时出现的右对齐的按钮

server/2025/1/23 21:48:02/

el-tree中,每一个节点后面添加一个按钮,响应除节点点击事件之外的操作,要求:

1、按钮在鼠标悬浮在该节点之上时才出现

2、按钮右对齐

实现如下。

1、为每个节点添加按钮

从官网说明来看,有两种方式添加按钮,render-content和 scoped slot,我使用的是scoped slot方式:

<el-tree:data="projectOptions":props="defaultProjectTreeProps"default-expand-allref="tree"row-key="unid"tooltip-effect="light":highlight-current="true"@node-click="handleNodeClick"><span slot-scope="{ node, data }">

http://www.ppmy.cn/server/160859.html

相关文章

Django学习笔记(安装和环境配置)-01

Django学习笔记(安装和环境配置)-01 一、创建python环境 1、可以通过安装Anaconda来创建一个python环境 # 创建一个虚拟python环境 conda create -n django python3.8 # 切换激活到创建的环境中 activate django2、安装django # 进入虚拟环境中安装django框架 pip install …

AI大模型-提示工程学习笔记11-思维树

卷首语&#xff1a;我所知的是我自己非常无知&#xff0c;所以我要不断学习。 写给AI入行比较晚的小白们&#xff08;比如我自己&#xff09;看的&#xff0c;大神可以直接路过无视了。 思维树&#xff08;Tree of Thoughts, ToT&#xff09; 是一种提示工程技术&#xff0c;…

提升 Go 开发效率的利器:calc_util 工具库

提升 Go 开发效率的利器&#xff1a;calc_util 工具库 在日常开发中&#xff0c;我们常常需要处理数组&#xff08;切片&#xff09;的交集、差集、并集操作&#xff0c;或者更新和过滤数据。尽管这些功能可以手动实现&#xff0c;但重复的逻辑代码不仅影响效率&#xff0c;也…

进阶——第十六届蓝桥杯(sscanf的运用)

声明变量 char tx_buf[30];char rx_buf[30];char car_type[5];char car_num[5];char car_time[15]; int sscanf(const char *str, const char *format,...); sscanf函数功能 sscanf 函数从字符串 str 中读取数据&#xff0c;根据 format 所指定的格式将数据存储到后续的变量中…

基于微信小程序的手机银行系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

推荐一个开源的轻量级任务调度器!TaskScheduler!

大家好&#xff0c;我是麦鸽。 这次推荐一款轻量级的嵌入式任务调度器&#xff0c;目前已经有1.4K的star&#xff0c;这个项目比较轻量化&#xff0c;只有5个源文件&#xff0c;可以作为学习的一个开源项目。 核心文件 项目概述&#xff1a; 这是一个轻量级的协作式多任务处理&…

CentOS 7乱码问题如何解决?

1.使用超级用户操作: sudo su2.修改i18n配置文件&#xff1a; vi /etc/sysconfig/i18n将文件修改或添加为以下内容&#xff1a; LANG"zh_CN.UTF8" LC_ALL"zh_CN.UTF8"保存并退出&#xff08;按Esc键&#xff0c;输入:wq&#xff0c;然后回车&#xff09…

什么是网络爬虫?Python爬虫到底怎么学?

最近我在研究 Python 网络爬虫&#xff0c;发现这玩意儿真是有趣&#xff0c;干脆和大家聊聊我的心得吧&#xff01;咱们都知道&#xff0c;网络上的信息多得就像大海里的水&#xff0c;而网络爬虫就像一个勤劳的小矿工&#xff0c;能帮我们从这片浩瀚的信息海洋中挖掘出需要的…