element tree全选后拿到最末级节点

最新推荐文章于 2024-08-07 23:16:55 发布
原创 最新推荐文章于 2024-08-07 23:16:55 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

本文分享了一种处理前端树形结构数据的方法，当后端仅需最末级节点ID时，通过遍历由elementtree获取的所有节点，筛选出无子节点的数据并提取其ID，适合前端新手学习。
部署运行你感兴趣的模型镜像

写帖子主意是自己碰到的一些小问题，然后害怕自己忘记了。以后便于查阅。
不bb上干货。
碰到过这么一个场景，后端要求传值是只要最末级节点的id，这个时候如果直接使用element tree提供的方法    this.$refs.tree.getCheckedNodes()  这样的话是会拿到所有节点组成的数组。
这个时候只要循环这个数组判断哪条数据没有children子级然后拿到这条数据的id就ok了。ps：前端新手，记录自己碰到可能会忘记的一些问题

您可能感兴趣的与本文相关的镜像

Python3.10

Python3.10

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 3890
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
element ui 树状表格选择父节点子节点全选，子节点不全选父节点半选
热门推荐
m0_58565372的博客
05-19 1万+
以上就可以实现树状表格选择父节点子节点全选，子节点不全选父节点半选，但是对于handleSelectionChange，里面处理数据还是很懵的，虽然解决了，但是感觉不是最优的方法，如果有好的解决方法，可以分享下，欢迎分享和指正。这个里面还是比较混乱的，打印出来三次，这个我是可以理解的，因为勾选了三个，但是打印的这个顺序，我不太懂，由于有个勾选之后，操作批量下载和批量取消，不勾选的时候，是禁止点击批量下载和批量取消的。于是我就对上面的代码进行了改进。
VUE element-ui之el-tree树形控件获取最后一级节点（无子节点的节点）
HanXiaoXi_yeal的博客
08-22 6145
VUE element-ui之el-tree树形控件获取最后一级节点（无子节点的节点）
Element ui tree 组件 获取到所有最后一级的节点
Happy Today
11-15 9505
获取tree组件中被选中的最后一级的节点 需要获取 被选中的所有节点 <el-tree :data="data" show-checkbox default-expand-all ...
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
yinzisang的博客
12-30 8563
设置el-tree层级线，并且只能选中无子节点的叶节点
【Element】el-tree 只需要选中最末级节点(回显数据)
IU
11-29 3229
筛选出没有下一级的节点 （核心代码如下） console.log(SelectedObj.checkedNodes) // 这是选中的节点数组 this.chosedData.departmentList = SelectedObj.checkedNodes.filter(item => { return item.childList.length === 0 }) ...
Java树形结构 根据父节点获取最底层节点数据 树形xml
weixin_48568302的博客
08-11 2966
Java树形结构 根据父节点获取最底层节点数据 树形xml
js代码-element tree 回显非全选的误区
07-16
总结起来，避免"js代码-element tree 回显非全选的误区"需要理解元素树的数据结构，正确追踪和更新节点状态，处理好复选框的关联性，遵循正确的遍历顺序，并考虑异步操作的影响。通过仔细分析`main.js`中的代码和`...
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
12-29
选中父节点时，父节点下所有子节点也都全部选中，看代码 1、HTML代码 <h2>TreeView Checkable <div id=treeview-checkable></div> 2、Json数据 function getTvStateData() { var defaultData = [ { text: '...
Element-Plus组件Tree树形控件时，传输失去父节点和回显父节点下的子节点全选问题解决
最新发布
远方的猫的博客
08-07 901
使用Tree树形控件时，子节点未全选时，往后端传输的选中节点没有包含父节点；从后端获取数据渲染时，如果获取的数据不是全选的，回显时父节点下的所有数据会自动全选；本文章旨在快速解决此问题
element tree树形组件获取最后一级数据
ZHANGWEI19930118的博客
05-24 1万+
最近做项目树形控件添加的有复选框，但是我要取最后一级的选择项 获取数据使用的组件获取数据的方法： 我是这样用的 let tree = this.$refs.tree.getCheckedKeys(); 但是这样取出来的是带着父级的，我只要取最后一级，百度好多都说要循环去取，但我又不想用循环。后来仔细看了一下方法的说明，发现这个方法还有一个boolean类型的参数，只要给的是true就可以只返回...
javascript：递归+闭包找到所有的最后一级
IU
04-06 3040
因为树形组件的原因导致点击的时候会拿到所有节点，需求上只需要拿到最后一个，所以写了这个递归函数，有点粗糙，未经改进，命名需要自己调整。 数据 const treeData = [ { title: 'Trunk 0-0', key: '0-0', children: [ { title: 'Branch 0-0-0', key: '0-0-0', disabled: true, children: [
Vue Treeselect el-tree-select 多选 只选中第三级
m0_71835253的博客
11-21 1091
Vue Treeselect el-tree-select 多选 只选中第三级
单选el-tree组件,只可选最后一个层级
weixin_44899044的博客
05-30 4179
/ 输出父节点数组。label: '子节点1-1-1'label: '子节点1-1-2'label: '子节点1-1',parentMap: {} // 父节点映射关系。label: '子节点1-2'// 获取当前选中子节点的所有父节点。label: '节点1',label: '节点2'// 只选中最后一个层级节点。// 展开点击的节点。
ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点
hupei
03-10 9281
ElementUI中el-tree树形控件给叶子节点添加事件/只允许选中（末）叶子节点
el-tree选择限制(只能三级单选el-checkbox多选框）及节点默认展开和默认选中
MISS_zhang_0110的博客
05-23 4328
element ui树形控件节点选择限制(只能三级单选）效果图一、主要代码 效果图 一、主要代码 <el-tree :data="dataTree" :props="defaultProps" node-key="id" highlight-current ref="dataConfigTree" :expand-on-click-node="false" accordion
用递归算法遍历树，将树的最后一级取出组成新数组
qq_36557846的博客
07-16 1429
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
vue 操作数组方法
宁夏前端工程师，马卫斌，wx：1457508895
07-25 3697
vue 操作数据方法
element tree封装为可控制只可选末级或都可选(1)
莫逸雪的博客
12-16 2580
要求一:只可选择末级节点的数据,所以采用了只有末级节点有checkdbox来控制. 要求二:选择末级节点情况下,是控制单选的,采用给每个节点加disabled属性,已选择时其他设置为不可选. 要求三:后台传的数据(共三级节点,有的只有二级影响checkedbox展示)需要拿到数据后进行过滤 要求四:实用性强,还需要满足节点都可选的业务,也就是说需要父组件传个flag值控制是都可选还是只有末节点可以传 封装的组件代码: <template> <vab-dialog ref="di
vue element el-tree 全选展开
09-26
在Vue Element的el-tree中，全选和展开的方法如下： 全选： - 通过设置setCheckedNodes方法来实现全选，将treeData传入该方法即可实现全选： `this.$refs.tree.setCheckedNodes(this.treeData);` - 通过设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值