VUE：el-tree 节点 双击事件

最新推荐文章于 2024-05-31 11:15:59 发布
最新推荐文章于 2024-05-31 11:15:59 发布
阅读量2.3k 收藏
点赞数
分类专栏： VUE 文章标签： vue Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhj68100055/article/details/128922363
版权
本文介绍了如何在 Vue 中使用 el-tree 组件实现节点的双击事件。通过设置双击计数器和定时器，当同一节点在短时间内被连续点击两次时，触发自定义的双击回调函数。示例代码中展示了如何定义 dbClicks 函数来检测双击，并在双击事件发生时调用 `Meun_DataSet_Click` 方法。
摘要由CSDN通过智能技术生成

<el-tree :data="DataSet.data" :props="{children: 'data',label: 'name'}" :render-content="DataSet.RenderContent" @node-click="DataSet_NodeClick" style="margin-top: 6px;"></el-tree>

<script>

// el_tree 双击事件

const dbc_el_tree = { count: 0, prev: null, timer: null }

const dbClicks = (node, id, cb) => {

dbc_el_tree.count++;

if ((dbc_el_tree.prev === node[id]) && dbc_el_tree.count >= 2) { cb() }

dbc_el_tree.prev = node[id];

dbc_el_tree.timer = setTimeout(_ => { dbc_el_tree.count = 0; dbc_el_tree.prev = null; }, 300);

}

export default {

data() {

最低0.47元/天 解锁文章
听海^之音
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-okr-tree:http
03-19
更新时间2021/02/04增加showNodeNum属性显示子节点数vue-okr-tree@1.0.9 文档和事例 地址： : Vue-Okr-树 基于Vue 2的组织架构树组件 安装 # use npm npm i vue-okr-tree # use yarn yarn add vue-okr-tree 快速...
el tree 双击事件
既然青春留不住，还是做个大叔好!
11-12 3726
场景 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
element ui tree组件使用render函数自定义节点内容，隐藏或者显示(附带点击子节点双击事件)
早晚的博客
07-07 2299
<el-tree ref="tree" class="stafftree" :data="devicesTreeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick" :render-content="renderContent" :default-checked-keys="checkedKeys" :default-expanded-keys="defaultExpandedKeys"
el-tree常用操作
最新发布
绣花针
05-31 679
el-tree常用操作
el-tree子节点添加双击事件
m0_37715184的博客
04-15 2375
为el-tree子节点添加双击事件 template代码部分： <el-col :span="8"> <h3>设备列表层级动态加载数据</h3> <el-tree :data="treeData" node-key="id" ref="treeRef"
Vue ElementUI el-tree 组件鼠标双击事件
youngfish的博客
12-07 4432
el-tree组件本身是不支持双击事件的，但是项目里有个需求需要双击来执行，查看官方文档可知 html代码： <el-tree class="tree" :data="nodeData" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> 注意一下，nodeData中每一项都需要一个唯一值，用来区分
elementUI Tree组件实现双击事件
mofeimo110的博客
11-02 3322
elementUI官方只提供了单击事件，而开发中很多时候需要双击事件来做一些操作，看了一下能搜索到的文章，感觉写的都缺少一些东西，所以自己实现了一个双击事件 <el-tree @node-click="nodeClick" > </el-tree> export default { data() { return { treeClickCnt: 0, treeClickTimeout: null, treeClickId: '
VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现_el-tree树节点双击
2401_84616444的博客
05-08 1078
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: “视图”,
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
8. **源码分析**：el-tree-select-master很可能是项目的源码目录，其中包含了组件的Vue组件代码、样式文件、配置文件等。通过阅读和研究源码，开发者可以更深入地了解组件的工作原理，并对其进行定制和扩展。 在...
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:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Element-ui Tree非侵入式增加双击展开功能（单击双击事件不冲突）
yusha123的博客
05-18 3227
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
基于vue3和elementPlus的el-tree组件实现懒加载点击节点展开列表
W-Mo-Mo的博客
08-04 3472
经常会遇到树状结构的页面，刚开始不是一股脑把树状数据全加载出来了，而是基于懒加载 点击节点后调取接口再展开。基于vue3和elementPlus的el-tree组件做个记录~
Element-UI el-tree功能应用
weixin_42562567的博客
06-28 2623
【代码】element-ui el-tree 搜索、点击事件、保存目录结构、拖拽功能应用。
element tree 双击树节点
sunyiuhang的博客
09-08 408
<el-tree class="filter-tree" :data="dataTree" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree" highlight-current > <div slot-scope="{ node, data }" @dblclick="handleNodeClick" style="width:.
Element tree树组件 鼠标双击事件
雪急飞绪博客
06-29 3232
需求 双击 tree上的子节点，把节点文字显示在输入框中（这里简化一下，双击 tree 显示文字即可，省略 $emit 那一步） 注解：props 可以接收 defaultExpandAll（是否默认展开所有节点） 效果如下： 基本代码 树组件代码 <template> <el-tree id="tree" v-loading="treeDataLoading" node-key="id" :data="treeData" :default
el-tree的双击事件
05-25
el-tree 是一个基于 ElementUI 的树形组件，可以使用它的 node-click 事件来监听节点的单击事件。而双击事件则需要自己进行封装。 以下是一个简单的双击事件封装示例： ```vue <template> <el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick" @node-dblclick="handleNodeDblclick" /> </template> <script> export default { data() { return { treeData: [ { label: '一级节点', children: [ { label: '二级节点1' }, { label: '二级节点2' }, ], }, ], treeProps: { expandOnClickNode: false, }, lastClickTime: null, }; }, methods: { handleNodeClick(node) { const currentTime = new Date().getTime(); if (this.lastClickTime && currentTime - this.lastClickTime < 500) { this.handleNodeDblclick(node); } this.lastClickTime = currentTime; }, handleNodeDblclick(node) { console.log('双击了节点', node.label); }, }, }; </script> ``` 在这个示例中，我们首先关闭了默认的节点展开行为（通过 `treeProps` 中的 `expandOnClickNode` 配置项）。然后在 `node-click` 事件中，我们记录下当前时间，并判断与上次单击事件之间的时间差是否小于 500ms，如果是，则触发双击事件；否则只触发单击事件。最后将当前时间保存为上次单击事件的时间，以备下次使用。 需要注意的是，这个示例只是一个简单的演示，实际开发中可能还需要考虑其他因素，比如双击事件的触发速度和用户体验等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值