el-tree使用获取当前选中节点的父节点数据(开发记录)

这篇具有很好参考价值的文章主要介绍了el-tree使用获取当前选中节点的父节点数据(开发记录)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前提

官网上有两种办法:
根据 data 或者 key 拿到 Tree 组件中的 node (data) 要获得 node 的 key 或者 data。
我这key设置后没有生效,采用的node获取的方法

1、html部分

    <el-tree 
    ref="tree"
    :data="treeData" 
    node-key="id"
    :props="defaultProps" 
    @node-click="handleNodeClick" 
    >
    </el-tree>

2、data举例

data(){
	return {
		treeData:[{
		  id:'11',
          label: '一级 1'
        }, {
          id:'22',
          label: '一级 2',
          children: [{
          	id:'221',
            label: '二级 2-1',
          }]
        }]
	}
}

二、实现

handleNodeClick(node){
	console.log(node)//node为点击节点绑定的**数据**
	let pNode = this.$refs.tree.getNode(node).parent.data;
	console.log(pNode)//获得点击节点父节点的**数据**
}

el-tree提供的回调事件:@node-click=“handleNodeClick”。(方法名自取,这里用的原来的“handleNodeClick”)

其他:①通过打印getNode结果,发现当前点击节点的值不是直接显示在结构中,而是用data又包裹了一层,data内部才是当前点击节点的具体数据。
②打印出的getNode结果,里面有一个parent属性,同样parent内的data才是父节点的数据
③对于一层结构中的id值,和我绑的node-key对应不上,只有如上述两个data中的id才是我正确需要的

附:getNode调用后打印的结构示例:
el-tree使用获取当前选中节点的父节点数据(开发记录)文章来源地址https://www.toymoban.com/news/detail-504872.html

到了这里,关于el-tree使用获取当前选中节点的父节点数据(开发记录)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-treeselect及el-tree点击节点获取上级节点的数据

    打印这个Node,如下: 展开parent 这个parent就是父节点,父节点中还包含了它自己的父节点,如果无父节点,返回null el-tree获取父节点还是挺简单的,树组件内部已经返给你了,直接获取就行 把树数据源,节点的父id传进来 //用当前项的id和父id对比是因为,当前项的父id即父节

    2024年02月11日
    浏览(40)
  • vue:el-tree 实现动态初始默认选中和全选

    官网链接:Element - The world\\\'s most popular Vue UI framework 涉及:1. 树结构转换一维数组             2. 与全选关联            3. 父子组件间传值      大家可以参考官网文档,写的还是挺清楚的。

    2024年02月12日
    浏览(44)
  • 自定义el-tree复选框选中状态vue elementUI

    :check-strictly属性:该属性默认false,表示严格遵循父子相互关联。父子相互关联(即选中父节点其所有子节点全部选中,取消选中父节点其子节点全部取消,且折叠、展开状态都一样)。 Attributes属性 参数 说明 类型 可选值 默认值 check-strictly 在显示复选框的情况下,是否严格

    2023年04月09日
    浏览(38)
  • el-tree 实现节点高亮

    要实现显示  el-tree  节点高亮,可以使用  el-tree  提供的  highlight-current  属性和  current-node-key  属性,以及  el-tree-node  组件提供的  highlight  属性。 首先,在  el-tree  组件中设置  highlight-current  属性为  true ,表示启用高亮当前节点的功能: 然后,在  el-tree  组件中

    2024年02月08日
    浏览(48)
  • Vue单页面实现el-tree el-breadcrumb功能、el-tree右键点击树节点展示菜单功能、树节点编辑节点字段名称功能

    (1) 点击el-tree节点 使用el-breadcrumb展示选中树节点及父项数据         重点: handleNodeClick方法、getTreeNode方法 (2) 选择el-breadcrumb-item设置el-tree节点选中             必须设置属性: current-node-key=\\\"currentNodeKey\\\"  、 node-key=\\\"id\\\"           重点: 设置树节点渲染 this.$refs.tree.set

    2024年02月16日
    浏览(50)
  • 【前端】- 在使用Element UI 的el-tree组件时,从底层去研究如何去实现一键展开/关闭【tree节点】的功能

    点击前效果: 点击后效果: 页面部分:这里是简单的数结构渲染,不多讲,$refs.Reftree获取的是el-tree的实例,具体作用请看下面的方法。 方法部分:该方法传入el-tree实例,直接点击按钮即可实现展开或者关闭,这里简单讲解一下 1、ref.store.root.childNodes 通过实例来调用tree组

    2024年04月16日
    浏览(58)
  • el-tree多个树进行节点同步联动(完整版)

    2024.1.11今天我学习了如何对多个el-tree树进行相同节点的联动效果,如图: 这边有两棵树,我们发现第一个树和第二个树之间会有重复的指标,当我们选中第一个树的指标,我们希望第二个树如果也有重复的指标也能进行勾选上,反之也是。 (1)要让父节点变成半选状态 这

    2024年01月24日
    浏览(37)
  • Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色

    el-tree默认选中的背景色是白色,有时候我们需求是一进入到页面就要发请求,并且设置默认选中的背景色改为蓝色,字体色为白色,然后选中的项也是背景色改为蓝色,字体色为白色,那这个时候我们可以给el-tree通过添加属性 highlight-current设为高亮,然后通过以下样式改变

    2024年02月13日
    浏览(65)
  • element-ui el-tree 设置指定级别节点显示复选框el-checkbox

            /deep/ .el-tree {         padding-top: 15px;         padding-left: 10px;         // 不可全选样式         .el-tree-node {           .is-leaf + .el-checkbox .el-checkbox__inner {             display: inline-block;           }           .el-checkbox .el-checkbox__inner {             display: none;    

    2023年04月08日
    浏览(58)
  • el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点

    实现目标:在生成el-tree时,默认勾选其中某几个选项;或在进行某个选项的选中时,同时勾选上另一个选项。 实现效果: 在生成树结构时,默认勾选其中的两个选项。 在勾选其中一个选项时,另一个选项也被同时勾选。 实现方法: 一、设置生成el-tree时默认勾选:两种方法

    2023年04月23日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包