1.两个 el-tree实现点击一个,同步激活另一个tree,并展开;2.获取所有tree节点;3.查询当前节点所有父级节点;4。同步激活另一个tree的同时实现只激活一个父节点的要求

注意:level字段必须唯一  

具体实操情况看备注并参考elementui文档

<template>

<div>

 <el-tree ref="tree2" highlight-current :data="treeData" :props="treeProps" accordion

                @node-click="handleClick2" node-key="level" children />

   <el-tree ref="tree2" highlight-current :data="treeData" :props="treeProps" accordion

                @node-click="handleClick2" node-key="level" children />

</div>

</template>

这是我得数据,仅供参考

<script>

export default {

data(){

return{

 firstMenuList: [

                {

                    label: "作物识别",

                    id: "1",

                    level: '1',

                    children:

                        [{

                            label: "粮食作物", id: "1-1",

                            level: '1-1',

                            dateApi: '种植面积_日期',

                            layers: [{

                                name: "玉米分布",

                                id: "ymfb",

                                level: '1-1-1',

                                status: true

                            }, {

                                name: "大豆分布",

                                id: "ddfb",

                                status: false,

                                level: '1-1-2',

                            }, {

                                name: "小麦分布",

                                id: "xmfb",

                                level: '1-1-3',

                                status: false

                            }]

                        }, {

                            label: "饲草作物", id: "1-2", level: '1-2', dateApi: '种植面积_日期1', layers: [{

                                name: "苜蓿分布",

                                level: '1-2-1',

                                id: "mxfb",

                                status: true

                            }, {

                                name: "玉米分布",

                                id: "ymfb",

                                level: '1-2-2',

                                status: false

                            }, {

                                name: "燕麦分布",

                                id: "yanmai",

                                level: '1-2-3',

                                status: false

                            }]

                        }]

                },

                {

                    label: "长势分析",

                    id: "2",

                    level: '3',

                    children:

                        [{

                            label: "粮食作物", id: "2-1", level: '2-1', dateApi: '长势监测_类别与数量_年份',

                            layers: [{

                                name: "玉米分布",

                                id: "ymfb",

                                level: '2-1-1',

                                status: true

                            }, {

                                name: "大豆分布",

                                id: "ddfb",

                                level: '2-1-2',

                                status: false

                            }, {

                                name: "小麦分布",

                                id: "xmfb",

                                status: false,

                                level: '2-1-3',

                            }]

                        }, {

                            label: "饲草作物", id: "2-2", level: '2-2', dateApi: '长势监测_类别与数量_年份1',

                            layers: [{

                                name: "苜蓿分布",

                                id: "mxfb",

                                level: '2-2-1',

                                status: true

                            }, {

                                name: "玉米分布",

                                id: "ymfb",

                                level: '2-2-2',

                                status: false

                            }, {

                                name: "燕麦分布",

                                id: "yanmai",

                                level: '2-2-3',

                                status: false

                            }]

                        }]

                }

            ],

    treeProps: {

                children: 'children',

                label: 'label',

                value: "id",

            },

}

},

methods:{

   handleClick(val, node, currentTree, otherTree) {

            otherTree.setCurrentKey(currentTree.getCurrentKey(), true)

//获取所有tree节点

const allNodes = otherTree.store._getAllNodes()

  this.breadList = []

获取当前节点的所有父节点

            this.platform(allNodes, otherTree.getCurrentNode())

(修复同步激活导致手风琴效果消失的问题)

 allNodes.forEach(item => {

                if (!this.breadList.includes(item)) {

                    item.expanded = false

                }

            })

},

   // 递归函数

        platform(allNode, node) {

            console.log(node, 'node')

            allNode.forEach(item => {

                if (item.data.level == (typeof node.level == 'number' ? node.data.level : node.level)) {

                    this.breadList.unshift(item)

                    if (item.parent) {

                        this.platform(allNode, item.parent)

                    }

                }

            })

        },

  handleClick1(val, node) {

            this.handleClick(val, node, this.$refs.tree1, this.$refs.tree2)

        },

        handleClick2(val, node) {

            this.handleClick(val, node, this.$refs.tree2, this.$refs.tree1)

        },

}

}

</script>   

  • 19
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值