关于el-tree中,点击复选框不能及时改变勾选状态的问题

问题描述:

    通过点击图层树节点前的复选框来触发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)
        }
      })
    },

你好,我是有问必答小助手,非常抱歉,本次您提出的有问必答问题,技术专家团超时未为您做出解答

本次提问扣除的有问必答次数,将会以问答VIP体验卡(1次有问必答机会、商城购买实体图书享受95折优惠)的形式为您补发到账户。

​​​​因为有问必答VIP体验卡有效期仅有1天,您在需要使用的时候【私信】联系我,我会为您补发。