HLJ 发布于
2021-12-09 09:20:31

vue element tree组件获取当前节点和其父祖级节点的数据

通过递归判断node节点值来获取父祖级节点数据

1、html代码

<template>
  <div>
  <div>{{breadList}}</div>
  <el-tree 
  ref="treeBox"
  node-key="id"
  highlight-current
  default-expand-all
  :data="data" 
  :props="defaultProps"
  :expand-on-click-node="false"
  @node-click="handleNodeClick">
  </el-tree>
  </div>
</template>

2、js代码

export default {
  data() {
    return {
      breadList:[],
      data: [{
        id:1,
        label: '一级 1',
        children: [{
          id:2,
          label: '二级 1-1'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods:{
    handleNodeClick(node,data){
      this.breadList = [];
      this.getTreeNode(data);

    },
    getTreeNode(node){
    console.log(node)
      if (node) {
        if (node.label !== undefined) {
          this.breadList.unshift(node.label);
          this.getTreeNode(node.parent);
        }
      }
    }
  }
};
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2021-12-09/568.html
最后生成于 2023-06-27 21:38:01
此内容有帮助 ?
0