问题描述:
通过点击图层树节点前的复选框来触发changeLayer事件,以实现控制图层是否显示的功能。但是实际使用时,默认勾选的节点,点击一次,图层就会关闭,但需要点击两次复选框才会取消选中。
不知道问题出在哪里
望zhijiao
HTML部分
<el-tree
:data="layers"
node-key="id"
ref="tree"
show-checkbox
v-model="layers.visible"
default-expand-all
:default-checked-keys="[6,7,8]"
@node-drop="nodeDrop"
@check="changeLayer"
draggable
class="myTree"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
</span>
</el-tree>
数据加载部分
computed: {
layers: function () {
if (this.map) {
const layers = []
let i =1
this.map.getLayers().getArray().forEach(y => {
if (y.get('originConfig')) {
layers.push({
id:i++,
visible: y.get('visible'),
label: y.get('title'),
layerInfo: y,
dropDown:null,
isLeaf:true,
legendUrl:null,
})
}
})
return layers
} else {
return []
}
}
},
点击事件部分
changeLayer () {
let checkedNodes = []
this.$refs.tree.getCheckedNodes().forEach(x=>{
checkedNodes.push(x.label)
console.log(x.label)
})
debugger
this.layers.forEach(x=>{
if (checkedNodes.includes(x.label)){
x.layerInfo.setVisible(true)
}else {
x.layerInfo.setVisible(false)
}
})
},