懒加载树,父节点被勾选,子节点懒加载后也被勾选

<template>
<div class="deptTree">
  <el-button
    @click="test"
  >测试
  </el-button>
  <!--根节点写死\子节点懒加载\手风琴模式-->
  <el-tree
    ref="tree"
    show-checkbox
    accordion
    :load="handleLoad"
    lazy
    node-key="id"
    :default-expanded-keys="[rootNode.id]"
    :default-checked-keys="[]"
    :props="defaultProps"
    :expand-on-click-node="true"
    :highlight-current="true"
    :default-expand-all="false">
  </el-tree>
</div>
</template>

<script>
  export default {
    name: "deptTree",
    data(){
      return {
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        content:'',
        treeData:[],
        rootKey:'00000002',
        rootNode : {
          id : "00000002",
          label : "海尔集团"
        },
        checkedKeys : []
      }
    },
    methods: {
      /**
       * 根节点写死子节点懒加载
       */
      handleLoad(node, resolve) {
        // 懒加载先保存当前选中的节点key, 展开后再设置一遍解决展开某选中节点后选中被取消的问题
        if(this.$refs.tree!=undefined) this.checkedKeys = this.$refs.tree.getCheckedKeys();
        if (node.level == 0) {
          return resolve([this.rootNode]);
        } else {
          var children = [
            {
              id : "00000003",
              label : "子节点1"
            },
            {
              id : "00000004",
              label : "子节点2"
            },
            {
              id : "00000005",
              label : "子节点3"
            }
          ];
          resolve(children);
        }
        if(this.$refs.tree!=undefined) this.$refs.tree.setCheckedKeys(this.checkedKeys);
      },
      test() {
        var checkedKeys = this.$refs.tree.getCheckedKeys();
        console.log(checkedKeys);
      }
    },
  }
</script>

<style scoped lang="scss">
</style>
<style lang="scss">
</style>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值