el-tree加载完成后默认触发点击事件非默认选中（上）选中第一个节点点击

最新推荐文章于 2024-07-08 12:02:33 发布
置顶 最新推荐文章于 2024-07-08 12:02:33 发布
阅读量8.9k 收藏 12
点赞数 5
分类专栏： Vue.js 前端 JavaScript 文章标签： el-tree默认点击选中 el-tree点击事件 el-tree默认节点点击事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27331631/article/details/104851801
版权
本文介绍了在Vue项目中使用Element UI的el-tree组件时，如何实现在树加载完成后默认点击第一个节点，以触发查询操作。通过监听数据变化，获取并模拟点击第一个节点的事件。同时提供了相关功能的进一步阅读链接，包括el-tree的点击事件处理和动态拖拽排序。
摘要由CSDN通过智能技术生成

如果你浪费了自己的年龄，那是挺可悲的。因为你的青春只能持续一点儿时间——很短的一点儿时间。 —— 王尔德

前言

最近工作使用Vue+Element UI来进行开发，遇到部门树功能的时候选择了el-tree组件来展示，功能都完成了，但需要在加载完成后默认点击第一个节点，从而查询右侧对应的部门人员信息，但官方没有提供默认触发node-click事件，通过Google找到相关答案

效果图：
部门树
代码如下

watch: {
   
    // 根据名称筛选部门树
    deptName(val) {
   
      this.$refs
最低0.47元/天 解锁文章
小狐狸和小兔子
关注
  • 5
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 21
    评论
专栏目录
element el-tree组件的动态加载、新增、更新节点的实现
10-15
:load 是一个方法，接收两个参数 node 和 resolve，当节点被点击时触发。通常情况下，我们会根据节点的层级来决定获取数据的方式。如果节点是顶级节点（node.level 等于 0），则直接从后端获取顶层数据；如果节点非...
vue树结构el-tree重新加载后默认触发上次节点点击事件
吴冬雪的博客
09-18 3509
template <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false" highlight-current :props="defaultProps" @node-click="handleNodeClick" v-loading="treeLoading" style="min-width: 300px;" ref="tree">
el-tree 默认高亮第一条数据 vue3
weixin_55721538的博客
01-05 655
el-tree 默认高亮第一条数据
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因
最新发布
m0_65607651的博客
07-08 921
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因 隐藏第一层或最后一层节点的勾选框
Element-UI 树形菜单（el-tree）加载完成后触发一次点击事件
热门推荐
qq_36537108的博客
07-27 1万+
目的： 左侧菜单树加载完成后触发一次点击事件（node-click ）,然后在右边加载数据 左侧菜单树点击后去请求数据 然后在右边展示。关键代码如下
el-tree树形拖拽菜单刷新默认点击第一个、非默认选中vue3
weixin_48290402的博客
11-22 748
树形拖拽菜单刷新默认点击第一个、非默认选中。
vue el-tree 默认展开第一个节点
qihaotang的博客
05-14 1万+
vue 的树形控件 el-tree 可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部关闭，如下所示： 对于指定节点的展开，需要指定其id，从而通过 default-expanded-keys 设置默认展开的节点。 对于后台返回的数据，默认展开其第一层的第一个，其实很简单：对于获取到的后台数据，将其第一层节点添加到数组中，将 default-expanded-keys 绑定数组，从而设置默认展开的节点。 实际应用：默认展开第一层节点中的第一个节点： <temp
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
ElementUI中el-tree节点的操作的实现
10-15
在`el-tree`中，我们可以监听节点点击事件，然后打开一个对话框，预填充当前节点的信息供用户修改。在对话框中，通过`v-model`双向绑定数据，使得用户在输入框中的修改实时反映到数据对象中。当用户确认修改后，找到...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
el-tree-selected-tree
11-15
在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
element-ui tree组件点击父节点默认选中第一个子节点。
weixin_52137696的博客
12-16 8428
element-ui tree组件点击父节点默认选中第一个子节点。
关于elementui中的tree形组件的懒加载模式的使用
weixin_44364028的博客
10-20 736
<template> <div> <el-tree node-key="id" lazy :load="loadNode" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true" v-loading="list.loading" @node-click="nodeCli
85.解决el-tree默认选中第一个节点且选中时更改背景色字体等以及设置鼠标悬浮时只有叶子节点为小手状态
银河与猫的博客
05-12 3069
然后在添加对应的样式（这里要注意在点击父节点时取消其子节点样式），记得给el-tree元素外层元素添加class名区分一下（我这里给它的上层元素添加的class名为：organization_configuration）的元素，改为数组，遍历该数组，然后在其内再遍历tree数据的数组，因为默认都是小手状态，所以判断type为1或2时，对该元素style样式做处理。这里后端接口返回的数据叶子节点的type为0或3，type为1和2的都是父节点，所以先获取所有class名为。
vue中tree实现单选，同时点击父节点默认选中第一个字节点，打印选中节点信息
weixin_56383764的博客
11-08 973
对vue的tree树做需求操作，单选、点击父节点选中第一个子节点、获取选中节点信息
elementui树形组件默认点击第一个字节点
weixin_46344421的博客
11-26 1286
在做项目的时候遇到个问题,要默认点击树形组件的第一个子节点去获取数据 因为只有子节点是有数据的 搜了一下好像没有类似的文章 记录一下 我的树形组件是作为一个子组件的 结构就不放了 data() { return { treeData : [], clickLeafTimes: 0 // 点击次数 } } // 首先在watch中监听树形组件的数据 在拿到树形组件的数据之后出发响应代码 watch: { // 第一次点击使用watch监听来触发 treeData (val) {
解决element-ui的el-tree组件设置默认选中，父级选中子级也被全部选中问题
我总是词不达意的博客
10-07 6334
解决element-ui的el-tree组件设置默认选中，父级选中子级也被全部选中问题
vue3中el-tree设置默认选中节点和展开节点
reembarkation的博客
11-07 3646
vue3中el-tree设置默认选中节点和展开节点
el-tree默认点击第一个
07-27
您好！谢谢您的问题！对于el-tree组件，默认情况下，点击第一个节点是没有内置的功能。但是您可以使用el-tree的事件监听来实现这个功能。 您可以在el-tree上监听节点被点击的事件（node-click），然后在事件处理程序中获取到点击的节点，将其设置为选中状态。具体示例代码如下： ```html <template> <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '节点1', children: [ { label: '子节点1' }, { label: '子节点2' } ] }, { label: '节点2' } ] }; }, methods: { handleNodeClick(node) { // 设置点击的节点为选中状态 node.selected = true; } } }; </script> ``` 在上述代码中，我们使用了el-tree组件，并在节点被点击时触发了handleNodeClick方法。在该方法中，我们将点击的节点设置为选中状态（通过设置node.selected = true）。这样，第一个被点击的节点就会被默认选中。 希望以上信息对您有所帮助！如果您有任何其他问题，请随时提问。
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小狐狸和小兔子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值