Vue ElementUI el-tree 组件鼠标双击事件

最新推荐文章于 2024-07-23 17:14:55 发布
最新推荐文章于 2024-07-23 17:14:55 发布
阅读量7.8k 收藏 25
点赞数 10
分类专栏： VUE ElementUI 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q469731241/article/details/107356605
版权
本文介绍了如何在ElementUI的tree组件中添加双击事件处理，由于官方不直接支持，作者通过监听node-click事件并结合业务需求实现了自定义的双击事件功能。
摘要由CSDN通过智能技术生成

目前 element-ui 的 tree 控件不支持双击事件，但是这个时候有个需求,需要双击事件.
没办法,只能自己写一个咯,记录下自己写的方法

简单引用,添加@node-click事件

	<el-tree
            ref="tree"
            node-key="id"
            :data="treeData"
            :expand-on-click-node="false"
            @node
最低0.47元/天 解锁文章
一川死水
关注
  • 10
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
VUE：el-tree 节点 双击事件
yhj68100055的博客
02-07 2349
VUE：el-tree 节点 双击事件
el-tree子节点添加双击事件
m0_37715184的博客
04-15 2409
为el-tree子节点添加双击事件 template代码部分： <el-col :span="8"> <h3>设备列表层级动态加载数据</h3> <el-tree :data="treeData" node-key="id" ref="treeRef"
Vue2设置el-tree数据处理、点击事件、色彩调整
最新发布
Ling_5230的博客
07-23 199
1.后端给的数据没有el-tree要求的label和children，所以需要自行处理一下2.一级节点和二级节点需要不同的点击效果，需要设置3.默认选中的背景色和字体色以及鼠标悬停的背景色都需调整。
el tree 双击事件
既然青春留不住，还是做个大叔好!
11-12 3792
场景 Cesium中双击飞到对应图层位置 方案 方法1 参考：https://blog.csdn.net/q469731241/article/details/107356605/ <el-tree ref="tree" node-key="id" :data="treeData" :expand-on-click-node="false" @node-click="handleN
为 elment-ui 的 tree 加上双击事件
Ravenq的专栏
02-29 2730
原文: https://ravenq.github.io/blog.md/el-tree-dblclick.html 目前 element-ui 的 tree 控件不支持双击事件，在后台管理系统时经常需要双击事件。 如果在 element-ui 源码上直接添加双击事件是很简单的，我已经在 github 上提交了 issue: #17448 和 PR。 但是等待官方更新都很慢，项目急着需要，而且官方...
Element tree树组件 鼠标双击事件
雪急飞绪博客
06-29 3318
需求 双击 tree上的子节点，把节点文字显示在输入框中（这里简化一下，双击 tree 显示文字即可，省略 $emit 那一步） 注解：props 可以接收 defaultExpandAll（是否默认展开所有节点） 效果如下： 基本代码 树组件代码 <template> <el-tree id="tree" v-loading="treeDataLoading" node-key="id" :data="treeData" :default
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
解决vue elementUI 使用el-select 时 change事件的触发问题
01-18
<el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发，但是这样写你会发现，页面初始化的时候会触发多次，选择之后又会触发多次，原因是我们用错了标签，...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
elementUI Tree组件实现双击事件
mofeimo110的博客
11-02 3385
elementUI官方只提供了单击事件，而开发中很多时候需要双击事件来做一些操作，看了一下能搜索到的文章，感觉写的都缺少一些东西，所以自己实现了一个双击事件 <el-tree @node-click="nodeClick" > </el-tree> export default { data() { return { treeClickCnt: 0, treeClickTimeout: null, treeClickId: '
element-ui 1.树型组件操作单击或者双击的方法、并防止不是同一树节点 2. ​使用select组件远程搜索时回显问题
Agoodoldcow的博客
08-04 1498
项目需求方法记录
VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现_el-tree树节点双击
2401_84616444的博客
05-08 1136
onMove(e) { //拖拽事件 https://blog.csdn.net/Kiruthika/article/details/123903706 可查看相关配置。//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件。//计时器,计算300毫秒为单位,可自行修改。label: “二级 3-2”}]}],toChange(e) {//拖拽事件。label: “二级 2-1”},label: “二级 2-2”}]label: “数据源2”,label: “数据源3”,label: “视图”,
Element-ui Tree非侵入式增加双击展开功能（单击双击事件不冲突）
yusha123的博客
05-18 3254
1.第一步添加组件 //自定义tree添加双击事件 import {Tree} from 'element-ui' Tree.name = 'extend-base-el-tree'; // 改名 Vue.use(Tree); // 注册 2.新建el-tree组件，里面的内容为 <template> <extend-base-el-tree v-bind="$attrs" @node-click="hdlClick"/> </template> &lt
element tree 树形结构鼠标事件
qq_41588568的博客
05-23 3760
https://blog.csdn.net/wxfdpp/article/details/83624460 https://blog.csdn.net/qq_37818095/article/details/86299336
element-ui中tree组件双击事件的实现
weixin_43415075的博客
05-06 2663
文章目录前言代码实现总结 前言 近期，笔者项目中遇到一个需求：实现左侧基于elment-ui tree组件的设备树节点的双击事件。查看element-ui官网后发现，element-ui中tree组件没有提供双击事件，故只能自动动手实现双击事件。 elwment-ui tree组件中提供了单击事件，故我基于单击事件实现双击事件。 代码实现 代码如下（示例）： ...... <el-tree :data="data" :props="defaultProps" @node-clic.
element ui树形图单击事件
梁诗傑的博客
01-22 1400
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui@2.15.0/lib/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.0/lib/theme-chalk/index.css"> .
vue elementui el-image 跨域text plain
05-13
如果你想在 Vue 中使用 Element UI 的 el-image 组件加载跨域的 text/plain 类型的图片，需要在服务器端设置响应头部，允许跨域访问。你可以在服务器端的响应头部中添加 Access-Control-Allow-Origin:*，来允许所有...
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值