vue Element Tree 树形控件(el-tree)单选及回显

已于 2024-04-25 17:50:00 修改
阅读量311 收藏
点赞数 1
文章标签： vue.js 前端 javascript elementui
于 2024-04-25 17:46:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44564897/article/details/138195653
版权
本文主要介绍了如何在Vue的ElementTree组件中使用default-expanded-keys和default-checked-keys属性实现节点的默认展开和选中，以及如何根据实际接口返回的数据动态处理这些设置。
摘要由CSDN通过智能技术生成

vue Element Tree 树形控件(el-tree)单选及回显
在这里插入图片描述在这里插入图片描述

default-expanded-keys：设置默认展开的节点（可以理解为父节点）
default-checked-keys：默认选中的节点
这是个数组，数据要根据实际接口返回情况做处理
在这里插入图片描述

汤无趣
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
详解vue-element Tree树形控件填坑路
12-29
通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el label=角色权限：> <el data=data2 node-key=id check=handleNodeClick default-expanded-keys=[] ref=tree default-checked-...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
11-19
需求： vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。 增加节点，点击确定后局部刷新，渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
vue3使用element-plus 树组件（el-tree）数据回显
2301_79265530的博客
01-17 1218
非常好用，拿过来修改一下check事件，ref获取就直接可以使用了。
element-UI中el-tree默认样式选中和复选框的回显
慎独的博客
10-13 1655
<el-tree ref="refTree" :data="treeData" show-checkbox node-key="id" highlight-current :props="defaultProps" default-expand-all :expand-on...
vue2 element 下拉可多选、搜索、返回选中内容、只显示前两条
最新发布
weixin_58412143的博客
05-13 212
【代码】vue2 element 下拉可多选、搜索、返回选中内容、只显示前两条。
elementUI Tree 树形控件单选实现
肥晨开发的学习之路
03-21 2028
在Element UI中，树形控件（el-tree）本身不支持单选功能。但是，你可以通过监听节点点击事件并手动更新选中状态来实现单选树。
el-tree实现回选
weixin_65982275的博客
08-08 1445
【代码】el-tree实现回选。
element Tree回显
qq_46523127的博客
03-03 1242
选中父级，子级也会全部选中问题。
element tree组件回显
m0_60997870的博客
06-13 627
element tree组件回显
elementUI tree回显值
ZYX10077的博客
03-16 2810
elementUI tree回显值 在开发一些功能中会遇到需要回显值的问题。elment文档也是有这样的功能提供。 其实回显的原理就是获取你node-key设置的值存放到数组里面，即可。但是现在有一个问题就是直接获取所有id扔进去，回显的时候你会发现会把所有的子集都回显了， 你没选到的也给回显了，这个不是你想要达到的目的。组件里面也有解决这个问题的方法，如下图 这两个方法就是解决这个问题的关键。 解决办法： 1、首先先定义一个数组作为标记 2、将遍及数组跟上面两个方法获取的数据进行合并，行程一个数组 3
Element UI tree 回显问题
weixin_30955341的博客
05-08 1408
Part.1 问题 写项目时遇到一个棘手的问题，在做关于权限功能时，点击修改需要显示角色原本对应的权限。涉及到了 tree 组件回显，但是有一个很尴尬的问题：tree 组件只要父节点选中，那么子节点就会全部被选中，这是我们不愿意看到的，可能你会说，取消父子联动属性不就好了，可是我们也需要在子节点被选中时，父节点保持半选中状态。 Part.2 思路 在仔细看完https://ele...
vue elementUI tree树形控件获取父节点ID的实例
10-18
今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element el-tree 选择状态回显
CodeBoyDong的博客
03-24 2458
问题：element UI el-tree 选择状态回显时，需要默认选中数据，这时调用this.$refs.tree.setCheckedKeys(array)，发现array选中数据里只要包含父级id，那么它下面的所有子级都会被选中，但实际上我们并不没有选中所有子级，而是只选中其中一个或者两个，以及父级呈现半选中状态，这才是我们要的效果。
【elementUI】使用el-tree组件根据所选id自动回显
SZnAl的博客
07-22 2674
使用elementUI tree组件根据所选id自动回显
elementUI tree回显数据总结
weixin_31172555的博客
07-08 2366
项目中需要使用tree来展示、提交、回显省市区信息。因为数据库的省市区信息总共有两千多笔，因此一次全部显示可能会出现渲染时间长的问题，最初考虑到使用懒加载，但回显出现问题（技术有限，没有找到其他人分享的经验），最终将需求拆分成省，省市，市区三个小模块，直接请求数据库。以下为相关页面和代码 <div style="display: flex;margin-top: 20px;align-items: center;"> <div class="contentTltle
element-ui el-tree数据回显问题
coldriversnow的专栏
06-17 1948
element-ui el-tree数据回显问题子菜单全部选中
解决element tree树形组件回显数据问题
weixin_46054431的博客
05-24 6140
解决vue+element tree组件 回显数据时有一个父节点数据下面子节点就都会被选中 1.当el-tree 从后台拿到数据动态回显展示出来时，只要有一个父节点，则下面的所有子节点全部被勾选了 如图所示： 后台返回的回显数据只有33（父节点组织管理）45（子节点个人管理），但是组织管理下的所有子节点都被回显选中。 2.解决方法代码如下 先在组件上绑定check-strictly属性 check-strictly属性控制是否严格的遵循父子不互相关联的做法，默认为 false 具体参考element官网ap
关于element-tree，解决id相同如何回显，同样的id只能选中一个的坑！！！！
wlq104的博客
02-08 3737
element-tree一个人在不同部门下，存在相同id的情况
el-tree勾选并过滤回显数据
cbxboy163的博客
07-04 2024
（注：数据中包含parentId）
vue elementui tree树形控件怎样控制选节点
05-10
要控制 Vue ElementUI Tree 树形控件中选中节点的状态，可以使用 `default-checked-keys` 或 `default-expanded-keys` 属性来设置默认选中和展开的节点。如果需要动态控制选中节点，可以使用 `v-model` 绑定一个数组，数组中存储选中节点的 key 值。 具体来说，可以按照以下步骤进行： 1. 在组件中定义一个数组，用于存储选中节点的 key 值，例如： ``` data() { return { checkedKeys: [] }; }, ``` 2. 在 Tree 组件上使用 `v-model` 将选中的节点 key 值与上面定义的数组进行双向绑定，例如： ``` <el-tree v-model="checkedKeys" :data="data" show-checkbox :default-checked-keys="['1001']" :default-expanded-keys="['1']" node-key="id" :props="defaultProps" ></el-tree> ``` 其中，`checkedKeys` 即为上文中定义的数组，`data` 为 Tree 组件的数据源，`show-checkbox` 表示显示复选框，`default-checked-keys` 和 `default-expanded-keys` 分别用来设置默认选中和展开的节点，`node-key` 表示节点的唯一标识，`defaultProps` 用来配置节点的属性。 3. 在需要控制选中状态的地方，修改 `checkedKeys` 数组即可。例如，可以在 Tree 组件的 `node-click` 事件中进行修改，例如： ``` <el-tree ... @node-click="handleNodeClick" ></el-tree> ``` ``` methods: { handleNodeClick(data, node) { if (this.checkedKeys.includes(data.id)) { this.checkedKeys.splice(this.checkedKeys.indexOf(data.id), 1); } else { this.checkedKeys.push(data.id); } } } ``` 在上面的例子中，`handleNodeClick` 方法会在节点被点击时触发，如果当前节点的 key 值已经存在于 `checkedKeys` 数组中，则从数组中删除该值，否则将该值添加到数组中。这样就可以动态控制选中节点的状态了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值