当前位置:网站首页>如何获取el-tree中所有节点的父节点
如何获取el-tree中所有节点的父节点
2022-07-04 05:29:00 【_处女座程序员的日常】
<el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
import {
throttle } from 'lodash'
export default {
data() {
return {
data: [
{
label: '一级 1',
value: '1',
children: [{
label: '二级 1-1',
value: '1-1',
children: [{
label: '三级 1-1-1',
value: '1-1-1'
}]
}]
}, {
label: '一级 2',
value: '1-2',
children: [{
label: '二级 2-1',
value: '2-1',
children: [{
label: '三级 2-1-1',
value: '2-1-1'
}]
}, {
label: '二级 2-2',
value: '2-2',
children: [{
label: '三级 2-2-1',
value: '2-1-1'
}]
}]
}, {
label: '一级 3',
value: '3',
children: [{
label: '二级 3-1',
value: '3-1',
children: [{
label: '三级 3-1-1',
value: '3-1-1'
}]
}, {
label: '二级 3-2',
value: '3-2',
children: [{
label: '三级 3-2-1',
value: '3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data, node) {
// console.log("data是多少呢");
// console.log(node);
// let selectedNode = this.$refs.tree.getNode(node);
this.breadList =[]
this.platform(node);
console.log("value是多少呢");
console.log(this.breadList);
},
// 递归函数
platform(node) {
if (!node.parent) {
// 若无父节点,则直接返回
return
}
this.breadList.unshift(node.data.value)// 将value保存起来
//调用递归
this.platform(node.parent)
},
}
</script>
点击第三级打印结果如下:
边栏推荐
- LM small programmable controller software (based on CoDeSys) note 22: error 4268/4052
- Write a complete answer applet (including single choice questions, judgment questions and multiple topics) (III) single choice questions, judgment questions, and the first question display
- Thread pool: use thread pool to optimize query speed
- [interested reading] advantageous filtering modeling on long term user behavior sequences for click through rate pre
- input显示当前选择的图片
- Analysis of classical pointer and array written test questions in C language
- 接地继电器DD-1/60
- flink1.13 sql基础语法(二)join操作
- [high concurrency, high performance and high availability of massive data MySQL practice-7] - memory data drop disk
- 云原生架构实战案例及优化解决方案
猜你喜欢
Evolution of system architecture: differences and connections between SOA and microservice architecture
2022年T电梯修理操作证考试题库及模拟考试
【QT】制作MyComboBox点击事件
谷歌 Chrome 浏览器将支持选取文字翻译功能
One click filtering to select Baidu online disk files
[technology development -25]: integration technology of radio and television network, Internet, telecommunication network and power grid
Introduction To AMBA 简单理解
补某视频网站的js,进行视频解密
19.Frambuffer应用编程
Supplement the JS of a video website to decrypt the video
随机推荐
力扣(LeetCode)184. 部门工资最高的员工(2022.07.03)
How to configure static IP for Kali virtual machine
PostgreSQL has officially surpassed mysql. Is this guy too strong!
(4) Canal multi instance use
Topological sorting and graphical display of critical path
js获取对象中嵌套的属性值
Enterprise level log analysis system elk (if things backfire, there must be other arrangements)
简易零钱通
Flink1.13 basic SQL syntax (II) join operation
BUU-Reverse-easyre
What is MQ?
[technology development -25]: integration technology of radio and television network, Internet, telecommunication network and power grid
Character types of C language
[QT] timer
Talk about the SQL server version of DTM sub transaction barrier function
【QT】制作MyComboBox点击事件
BeanFactoryPostProcessor 与 BeanPostProcessor 相关子类概述
left_and_right_net可解释性设计
Use of hutool Pinyin tool
19. Framebuffer application programming