element tree获取节点的父级目录

node-key="id" 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

:expand-on-click-node="true" 是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

:data="dataList" 展示数据，绑定dataList

@node-click="handleNodeClick"

  1 <el-tree 
  2     ref="tree"
  3     :data="dataList"
  4     node-key="id"
  5     :props="defaultProps"
  6     @node-click="handleNodeClick"
  7     :expand-on-click-node="true"
  8     >
  9 </el-tree>
 10 
 11 <script>
 12   export default {
 13     data() {
 14       return {
 15         dataList: [{
 16           label: '一级 1',
 17           id: '1'
 18           children: [{
 19             label: '二级 1-1',
 20             id: '11'
 21             children: [{
 22               label: '三级 1-1-1'
 23               id: '111'
 24             }]
 25           }]
 26         }, {
 27           label: '一级 2',
 28           id: '2'
 29           children: [{
 30             label: '二级 2-1',
 31             id: '21'
 32             children: [{
 33               label: '三级 2-1-1',
 34               id: '211'
 35             }]
 36           }, {
 37             label: '二级 2-2',
 38             id: '22'
 39             children: [{
 40               label: '三级 2-2-1',
 41               id: '221'
 42             }]
 43           }]
 44         }, {
 45           label: '一级 3',
 46           id: '3'
 47           children: [{
 48             label: '二级 3-1',
 49             id: '31'
 50             children: [{
 51               label: '三级 3-1-1',
 52               id: '311'
 53             }]
 54           }, {
 55             label: '二级 3-2',
 56             id: '32'
 57             children: [{
 58               label: '三级 3-2-1',
 59               id: '321'
 60             }]
 61           }]
 62         }],
 63         //父级目录列表
 64         parentMenuList: [],
 65         defaultProps: {
 66           children: 'children',
 67           label: 'label'
 68         }
 69       };
 70     },
 71     methods: {
 72         // 点击tree的节点，触发handleNodeClick事件
 73         
 74         handleNodeClick(data, node ,el) {
 75             // 此处可添加点击事件的相关操作，其中data是树节点相关数据，node中亦存在树节点相关数据，另外还存在其parent和children
 76             console.log(data, node);
 77             
 78             // 若node未知，可根据以下方式获取相关节点的node值
 79             let currentNode = this.$ref.tree.getNode(data)  //该值与handelNodeClick函数参数node相同，ref.紧跟着的名称为el-tree组件
 80             
 81             
 82             // 获取对应节点的父级目录
 83             this.nodeClick(node)
 84             // remove()翻转的原因是，获取到的parentMenuList为层级大的在前，层级小的在后，故需要进行翻转再拼接
 85             let parentMenuList = this.parentMenuList.remove()
 86             this.parentMenuList = parentMenuList
 87             
 88             // 将获取到的父级目录列表进行组合输出，若点击三级1-1-1得到的结果为  一级 1/二级 1-1/三级 1-1-1
 89             let parentMenu = ''
 90             this.parentMenuList.forEach((item,index)=>{
 91                 if(index !== this.parentMenuList.length-1) {
 92                     parentMenu += item + '/'
 93                 } else {
 94                     parentMenu += item
 95                 }
 96             })
 97             console.log(parentMenu) 
 98             
 99         },
100         // 获取tree任意节点父级列表
101         nodeClick (node) {
102             if (node.label) {
103                 this.parentMenuList.push(node.label)
104             }
105             //迭代
106             if(node.parent) {
107                 this.nodeClick(node.parent)
108             }
109         },
110     }
111   };
112 </script>

posted on 2021-09-15 15:31 青小记阅读(2162) 评论(1) 编辑收藏举报