1.两个 el-tree实现点击一个,同步激活另一个tree,并展开;2.获取所有tree节点;3.查询当前节点所有父级节点;4。同步激活另一个tree的同时实现只激活一个父节点的要求
label: "饲草作物", id: "1-2", level: '1-2', dateApi: '种植面积_日期1', layers: [{label: "饲草作物", id: "2-2", level: '2-2', dateApi: '长势监测_类别与数量_年份1',label: "粮食作物", id: "2-1", level: '2-1', dateApi: '长势监测_类别与数量_年份
注意: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>
更多推荐
所有评论(0)