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

最新推荐文章于 2024-09-25 11:14:06 发布
置顶 最新推荐文章于 2024-09-25 11:14:06 发布
阅读量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元/天 解锁文章
小狐狸和小兔子
关注
专栏目录
el-tree加载完成后默认触发点击事件非默认选中（下）支持自定义节点
小狐狸和小兔子
07-24 4192
前面那篇选中默认节点，有朋友留言说能不能支持自定义节点，自己想了想认为可行，思路主要利用el-tree 的current-node-key 和highlight-current属性，如图 <el-tree :data="deptTree" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
element el-tree组件的动态加载、新增、更新节点的实现
10-15
:load 是一个方法，接收两个参数 node 和 resolve，当节点被点击时触发。通常情况下，我们会根据节点的层级来决定获取数据的方式。如果节点是顶级节点（node.level 等于 0），则直接从后端获取顶层数据；如果节点非...
vue树结构el-tree重新加载后默认触发上次节点点击事件
吴冬雪的博客
09-18 3569
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 默认选中第一个且高亮显示
最新发布
qq_45915072的博客
09-25 256
node-key="id" 是关键。
Element-UI 树形菜单（el-tree）加载完成后触发一次点击事件
热门推荐
qq_36537108的博客
07-27 1万+
目的： 左侧菜单树加载完成后触发一次点击事件（node-click ）,然后在右边加载数据 左侧菜单树点击后去请求数据 然后在右边展示。关键代码如下
element el-tree 默认调用点击事件
yjtt__的博客
05-06 8945
在项目中遇到需求，点击表格中的某一个数据，跳转到有树组件 的页面，并默认调用一次点击事件 在watch中监听树绑定的数据 watch: { dataList(val) { if (this.$route.query.source) { if (val) { this.$nextTick(() => { ...
el-tree树形拖拽菜单刷新默认点击第一个、非默认选中vue3
weixin_48290402的博客
11-22 781
树形拖拽菜单刷新默认点击第一个、非默认选中。
el-tree 默认高亮第一条数据 vue3
weixin_55721538的博客
01-05 708
el-tree 默认高亮第一条数据
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
ElementUI中el-tree节点的操作的实现
10-15
在`el-tree`中，我们可以监听节点点击事件，然后打开一个对话框，预填充当前节点的信息供用户修改。在对话框中，通过`v-model`双向绑定数据，使得用户在输入框中的修改实时反映到数据对象中。当用户确认修改后，找到...
elementui树形组件默认点击第一个字节点
weixin_46344421的博客
11-26 1310
在做项目的时候遇到个问题,要默认点击树形组件的第一个子节点去获取数据 因为只有子节点是有数据的 搜了一下好像没有类似的文章 记录一下 我的树形组件是作为一个子组件的 结构就不放了 data() { return { treeData : [], clickLeafTimes: 0 // 点击次数 } } // 首先在watch中监听树形组件的数据 在拿到树形组件的数据之后出发响应代码 watch: { // 第一次点击使用watch监听来触发 treeData (val) {
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue中tree实现单选，同时点击父节点默认选中第一个字节点，打印选中节点信息
weixin_56383764的博客
11-08 1014
对vue的tree树做需求操作，单选、点击父节点选中第一个子节点、获取选中节点信息
vue3中el-tree设置默认选中节点和展开节点
reembarkation的博客
11-07 3934
vue3中el-tree设置默认选中节点和展开节点
vue el-tree懒加载默认展开一级，懒加载刷新（默认高亮某个节点，触发某个节点的点击事件）
meimeib的博客
07-16 3267
场景 如上图所示，左边展示分组及分组下的标签，点击某个标签，在右边展示某个标签的详情，可以对标签内容进行编辑保存，还可对标签进行搜索，默认展示全部标签，展开一级不目下标签，若对标签进行搜索筛选，则把每个节点都展开 实现准备 准备两棵树，一颗树存放全量标签，一棵树存放筛选后的标签 在获取懒加载数据时缓存第一个节点，在编辑标签保存后刷新列表时使用 每次编辑标签时，先把编辑的标签进行本地存储，在刷新树状列表完成后根据id进行高亮回显及标签展示 实现步骤 //这棵树是搜索标签时展示的树 <div v-if=
vue3 + element-plus 下使用el-tree的相关问题
m0_48083875的博客
12-08 1061
el-tree后面自定义添加的图标想要绑定事件应该使用 @click.stop 这样不会触发el-tree本身的node-click方法。需求出发点是 以tree形式展示数据，父节点不可以点击，只有子节点可以点击，并且点击节点后边的按钮不可以触发节点的点击事件！
element-ui tree组件点击父节点默认选中第一个子节点。
weixin_52137696的博客
12-16 8567
element-ui tree组件点击父节点默认选中第一个子节点。
解决element-ui的el-tree组件设置默认选中，父级选中子级也被全部选中问题
我总是词不达意的博客
10-07 6446
解决element-ui的el-tree组件设置默认选中，父级选中子级也被全部选中问题
el-tree通过default-checked-keys动态默认选中某节点
weixin_67898309的博客
04-11 2161
el-tree树节点默认选中
el-tree实现懒加载和部分节点默认选中完整代码
09-14
el-tree 是 Element UI 中的组件，用于展示树形数据结构。懒加载是指节点数据只在需要时才加载，以提高性能。部分节点默认选中指的是在渲染树形结构时，某些节点根据业务逻辑默认被选中。 以下是一个简单的实现 el-tree 实现懒加载和部分节点默认选中的完整代码示例，使用的是 Vue.js 框架： ```html <template> <div> <el-tree :data="data" :props="defaultProps" lazy :load="loadNode" :default-checked-keys="defaultCheckedKeys" node-key="id" ></el-tree> </div> </template> <script> export default { data() { return { data: [], // 树形数据 defaultProps: { children: 'children', label: 'label' }, defaultCheckedKeys: ['1'], // 默认选中的节点id }; }, methods: { loadNode(node, resolve) { // 模拟懒加载处理 if (node.level === 0) { setTimeout(() => { // 第一层节点直接展开 resolve([ { id: '1-1', label: '一级-1', label: '二级-1-1' } ] }, { id: '1-2', label: '一级-2', children: [ { id: '1-2-1', label: '二级-1-2' } ] } ]); }, 500); } else { // 其他层节点默认加载空数据 resolve([]); } } }, mounted() { // 模拟异步获取数据 setTimeout(() => { this.data = [ { id: '1', label: '一级 1', children: [ { id: '1-1', label: '二级 1-1' }, { id: '1-2', label: '二级 1-2' } ] }, { id: '2', label: '一级 2', children: [ { id: '2-1', label: '二级 2-1' } ] } ]; }, 1000); } }; </script> ``` 在这个代码示例中： - `data` 是树形结构数据的数组。 - `defaultProps` 是树形组件的属性配置，这里定义了子节点的键名为 `children`，节点显示文本的键名为 `label`。 - `defaultCheckedKeys` 定义了默认选中的节点的id列表。 - `loadNode` 方法用于处理懒加载逻辑，当节点第一次被展开时触发。这里我们通过判断 `node.level` 来决定如何加载数据。如果是根节点，则异步加载子节点数据；否则返回空数组，表示没有子节点。 - `mounted` 钩子函数用于模拟异步加载树形数据。
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小狐狸和小兔子

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

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

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

打赏作者

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

抵扣说明：

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

余额充值