ElementUI tree组件鼠标移入移出节点，显示隐藏操作按钮（新增，删除等）

最新推荐文章于 2024-04-17 16:21:59 发布

想当歌手的码农

最新推荐文章于 2024-04-17 16:21:59 发布

阅读量1.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue elementui 树结构

本文链接：https://blog.youkuaiyun.com/weixin_40285008/article/details/116005668

前端开发专栏收录该内容

23 篇文章

订阅专栏

这个博客探讨了如何在Vue中利用@mouseenter和@mouseleave事件来控制元素的显示状态。通过设置data.show属性，实现了鼠标悬停时显示加号图标（表现为一个蓝色的圆形加号），离开时隐藏的效果。点击图标触发append方法，这涉及到组件间的交互和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

@mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)"

 <i v-show="data.show" class="el-icon-circle-plus blue" @click="($event) => append($event,node,data)"></i>

mouseenter(data){
        this.$set(data, 'show', true)
      },
      mouseleave(data){
        this.$set(data, 'show', false)
      },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

想当歌手的码农

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element-tree鼠标移入显示操作鼠标移出隐藏操作

小匠的Blog

05-16

966

时，我们可以通过以下方式实现鼠标移入和移出的效果。在组件的模板中，为树节点添加。需要注意的是，具体的实现细节可能因项目需求而有所不同。属性，从而控制操作按钮的显示与隐藏。

vue按钮移上去显示提示_vue element-ui tree 鼠标移入出现添加、修改、删除等按钮...

weixin_35706991的博客

01-14

1275

1、tree 组件代码ref="tree":props="defaultProps"current-node-key="1":load="loadNode"lazyindent="0"node-key="space_id":default-expanded-keys="defaultExpanded":filter-node-method="filterNode":expand-on-click-...

参与评论您还未登录，请先登录后发表或查看评论

elementui tree 组件实现鼠标移入节点，节点后面显示添加删除按钮

weixin_30399871的博客

07-12

2635

首先说明个人自我感觉我这个办法比较low，算是抛砖引玉，希望各位高手有更好的办法多多指点！多谢我们的需求是鼠标进入节点的时候对应节点后面显示添加删除按钮，本来用JQ挺好实现的效果，但是在vue中个人感觉不那么容易实现，最初我是想通过v-show 或者v-if 来控制这些按钮的显示和隐藏，但是效果确是我放上去以后所有节点后面的按钮都显示出来了，代码和效果如下 --------------...

element-ui el-table 鼠标移入滚动条出现移出表格滚动条隐藏

qq_41287158的博客

11-10

2719

element-ui el-table 鼠标移入滚动条出现移出表格滚动条隐藏使用el-table的两个事件 cell-mouse-leave // 当单元格 hover 退出时会触发该事件 cell-mouse-enter // 当单元格 hover 进入时会触发该事件我这里用到了jQuery(不会引入的可以去搜一下) <el-table height='500' :data="userList" style="width: 100%" :header-cell

vue element-ui 鼠标划入table某行该行操作按钮显示与隐藏

wang13679201813的博客

10-20

2688

情况1：鼠标划入table某行该行操作按钮显示与隐藏 elemenu-ui/karman-ui的table 鼠标进入某一行显示操作按钮代码: <kui-table :data="table.data" size="mini" style="margin-top: 30px" > <kui-table-col

vue elementUI tree树形控件获取父节点ID的实例

10-18

当我们需要在Element UI的Tree组件中获取被选中节点的父节点ID时，需要通过一些编程技巧来实现。本篇文章主要就这一问题给出一个具体实现的实例。 Element UI的Tree组件提供了多种方法来处理节点数据，其中包括获取...

ElementUI中el-tree节点的操作的实现

10-15

在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。首先，让我们来看一下`el-tree`的基本配置。在HTML部分，`el-tree`组件接收`data`属性，这是树...

Element-ui tree组件自定义节点使用方法代码详解

10-18

通过实例代码的剖析，我们可以看到自定义节点不仅能够控制内容显示，还可以在Tree组件中实现节点的拖拽、置顶等功能，这为构建更复杂的用户界面提供了极大的灵活性和强大的功能支持。在实际开发过程中，应当根据业务...

Element UI中el-tree组件的动态加载与节点增改操作

热门推荐

qq_23064501的博客

03-13

1万+

<el-tree ref="tree" :props="defaultProps" current-node-key="1" :load="loadNode" lazy indent="0" node-key="space_id" :default-

【vue】el-tree的新增/编辑/删除节点

qq_39404437的博客

04-17

9295

关于树形结构的新增同级节点等四种操作，各种参数配置完全继承el-tree，本篇使用vue2+element-ui。

el-tree实现鼠标移入出现/移除功能按钮

xcxcsdn的博客

12-06

2830

如下，当鼠标移入：当鼠标移出：编辑、添加和删除的功能按钮便消失上代码： <el-tree ref="tree" :data="dataArr" node-key="id" :expand-on-click-node="true" :default-expanded-keys="oneTree" :props="de.

vue element-ui组件 el-tree 树菜单鼠标滑过mouseenter，mouseleave移入移出节点，显示操作按钮新增，删除等

qq_39797360的博客

06-11

5208

效果图表单，加入移入移出事件 mouseenter，mouseleave，用v-show 定义显示 <el-tree class="filter-tree tree" ref="tree" highlight-current :expand-on-click-node = "false" :data="categories"

element-ui树形控件隐藏某些指定的节点

forteenBrother的博客

04-19

1万+

UI今天给了一张图，需要树形控件通过自定义节点内容实现。需要显示父节点，不显示子节点，点击父节点拿到子节点的数据，显示在表格中。如下图，就长这样。实现定义节点 <template> <div id="operatePush" class="operate_push"> <el-tree :data="treeData" ...

element tree树形控件自定义图标以及隐藏自带箭头

Harley567

02-13

2746

element tree树形控件自定义图标以及隐藏自带箭头

elementPlus vue3 树滑动显示增删且改写节点为下拉框

target_for的博客

05-26

876

elementPlus vue3 树滑动显示增删且改写节点为下拉框

el-tree 根据节点属性控制节点显隐

qq_42022928的博客

09-30

7911

一、整体思路用render-content方法实现树节点的内容区的渲染，根据节点属性判断是否渲染内容区，若不显示，则删除该节点。二、代码实现 <div id="tree"> <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" :default-checked-keys="checkedKeys"

vue el-tree 添加鼠标右键菜单

且听风吟的博客

12-19

7290

最近实现了一个功能：点击 el-tree 某一行，鼠标右键出现菜单，点击相应的菜单可进行对应的操作。基础布局代码： <div class="dev-type-main-left">  <div v-show="showRightMenu"> <ul id="me...

根据条件控制el-tree节点显示隐藏

Y_seaboy的博客

04-25

4804

获取后台数据后，调用this.$refs.componentTree.filter(“VS”);触发filterNode 方法，按照条件控制显示。后台返回el-tree全量数据，前端根据条件控制每个节点显示隐藏。

vue3中 elementui tree组件点击父节点默认显示第一个

06-02

在 Vue3 中，ElementUI 的 Tree 组件默认情况下是不会自动展开父节点的。如果你希望它能够自动展开父节点并显示第一个子节点，可以监听 `node-click` 事件，在事件处理函数中获取当前点击的节点，然后将其父节点的 `expanded` 属性设置为 `true`，并将其第一个子节点的 `current-node-key` 属性设置为 `true`。例如： ```html <el-tree :data="data" @node-click="handleNodeClick" > </el-tree> ``` ```js methods: { handleNodeClick(node) { if (node.parent) { node.parent.expanded = true if (node.children && node.children.length > 0) { this.$refs.tree.setCurrentKey(node.children[0].id) } } } } ``` 在这个示例中，我们通过监听 `node-click` 事件，获取当前点击的节点 `node`，然后判断它是否有父节点。如果有父节点，我们将其父节点的 `expanded` 属性设置为 `true`，并将其第一个子节点的 `current-node-key` 属性设置为 `true`，从而实现自动展开父节点并显示第一个子节点的效果。