el-tree 选中子节点获取其父节点数据

最新推荐文章于 2024-05-09 11:22:17 发布
最新推荐文章于 2024-05-09 11:22:17 发布
阅读量7.7k 收藏 9
点赞数 6
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49578914/article/details/114361739
版权

需求是，部门及岗位下拉树，**选中岗位，获取对应的岗位id，及其父级部门的id并回显，**ele的文档有@node-click="handleNodeClick"钩子函数 共三个参数，依次为：选中的data、节点对应的 Node、节点组件本身。一个方法就可以了。

handleNodeClick(data,node) {
  console.log(data,'当前节点的父节点:',node.parent.data);

![获取选中个子节点的父级数据]!](https://img-blog.csdnimg.cn/20210304102707582.png)

xfxTab
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js tree 根据子节点找到所有父节点
程序员石磊
06-20 4958
利用深度优先遍历和递归 var acceptUnitNodes = null;//接收单位树形数据 function findParentNode(ids){ //ids 是子节点数组 var parentNodes = [];//所有父节点 var forfun = function (id,nodes) { for(var i=0;i<nodes.length;i++){ var currentNode = nodes[i]; if(currentNode.id =
js 递归树根据子节点获取所有父节点
qq_42583562的博客
12-15 2847
js 递归树根据子节点获取所有父节点
el-tree选择子级默认选中父级，选中父级不选中子级
最新发布
m0_48113138的博客
05-09 530
【代码】el-tree选择子级默认选中父级，选中父级不选中子级。
el-tree组件实现获取子节点全选的父节点的信息
txun123的博客
04-18 2373
问题背景： 使用el-tree来展示权限树结构信息，然后把所有选中的节点都传给后端，后端查询数据时出现一个问题，如果选中的是根节点，前端就会把整棵树的数据都传给后端，后端sql执行性能差。 后端提出要求，如果子节点都选中了，就不要传子节点了，只要把父节点的信息传出去。element-ui文档没有现成的方法。只能自己实现，代码如下： /** * 获取树结构已选节点：如果是父节点下子节点全选则只获取父节点 * @param {*} store === this.$refs.tree.store *
JS树形结构数据，根据子节点数据获取所有父节点数据
dearyang
07-14 5592
省市区多维数组 通过value=130628 获取到 ["河北省", "保定市", "高阳县"]函数 调用 这样就可以根据子节点数据获取所有父节点数据啦
js 树形结构数据 已知某一子节点 一次向上获取所有父节点
jdrunk的博客
08-04 3204
已知树形结构 res。现在有一个对象是{code: 1,name: “水上分局”},想向上依次获取取得父级，比如说水上分局 父节点是汉阳区 汉阳区父节点是武汉市 武汉市父节点是湖北省 最后将 汉阳区 武汉市 湖北省 var res = [{ code: 1, name: "湖北省", children: [{ code: 1, name: "武汉市", children: [{ code: 1, .
如何获取el-tree中所有节点的父节点
qq_42931285的博客
07-02 4163
el-tree、获取所有的父节点
vue3 el-tree ts数据格式递归处理，获取所有父节点信息，实时筛选
weixin_40449665的博客
09-02 5388
实现el-tree筛选，其中要注意数据格式的处理以及所有父节点信息的获取
ElementUI中el-tree节点的操作的实现
10-15
`el-tree`组件接收`data`属性，这是树形结构的数据源，`props`用于指定子节点和节点标签的属性名，`@node-click`监听节点点击事件，`show-checkbox`为节点添加复选框，`node-key`用于唯一标识每个节点，`check-...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用element-ui的el-tree组件查询节点父节点(node-click)
u012394336的博客
04-22 6415
一、前端页面 <template> <div> <el-row > <!-- 查询工具栏--> <el-col > <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> </el-col> </el-row>
在vue elmennt tree 中 点击子节点 获取 所有父节点的信息
YTXLZ520的博客
04-30 940
<el-tree :data="data" ref="tree" class="treedata" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> // 这是htlm 部分； handleNodeClick(data, node) { // this.$store.disp.
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2940
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选)
sumimg的博客
04-22 5974
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选) <el-tree :data="roleMenuData" node-key="id" ref="tree" :default-expanded-keys="default_expanded" :default-checked-keys="default_select"...
[element-ui] tree控件如何取得被选中的节点,以及父节点(即使没被全选)
qq_14993591的博客
03-10 4946
<el-tree :data="roleMenuData" node-key="id" ref="tree" :default-expanded-keys="default_expanded" :default-checked-keys="default_select" @check-change="handleCheckChange" :props="defaultProps" :show-checkbox="true" //增加这.
elmentui中tree在选中子节点时无法获取父节点数据
aguo111的博客
05-31 579
可以获取当前树节点选中数据但是选中最底层字节点时只有该子节点数据无法获取父节点，根据当前业务需求既要获取子节点也要获取当前父节点。refs.tree.getHalfCheckedNodes()通过获取当前选中节点父节点数据。
tree 树形结构数据，点击子元素获取父元素
Deardhf的博客
12-22 1989
1.写element el-tree时，点击最后一个子元素，node-click事件只能获取当前对象，但是我想获取子元素之上的所有数据 2.操作（不能使用foreach等，否则break，不生效） checkedTreeNode(data) { let vm = this; let areaCode = data.areaCode vm.temp = []; var callback =...
el-tree选中父节点默认选中子节点数据
06-03
要选中一个 el-tree 组件的父节点并且默认选中所有子节点数据，可以通过以下步骤实现： 1. 获取要选中的父节点的 key 或者 data 属性值； 2. 通过该属性值找到该节点的所有子节点； 3. 遍历这些子节点，将它们的 data 属性值存储到一个数组中； 4. 调用 el-tree 组件的setCheckedNodes方法，将该数组作为参数传入。 具体代码实现如下： ```javascript // 获取要选中父节点的 key 或者 data 属性值 const parentKey = '1'; // 通过该属性值找到该节点的所有子节点 const children = this.$refs.tree.getNode(parentKey).childNodes; // 遍历所有子节点，将它们的 data 属性值存储到一个数组中 const childNodes = []; children.forEach(child => { childNodes.push(child.data); }); // 调用 el-tree 组件的setCheckedNodes方法，将该数组作为参数传入 this.$refs.tree.setCheckedNodes(childNodes, true); ``` 注意，这种方式会选中父节点和所有子节点的数据，而不会选中父节点和所有子节点的复选框。如果需要同时选中父节点和所有子节点的复选框，可以通过调用 el-tree 组件的 setCheckedKeys 方法来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值