vue el-tree实现单选

在公司做项目中遇见这样一个要求,树形结构采用懒加载外加只能单选

 <el-tree
            :data="data"
            class="filter-tree filter-tree-right"
            :load="treeLoad"
            :lazy="true"
            :props="defaultProps"
            node-key="orgStructureId"
            show-checkbox
            :check-strictly="true"
            :filter-node-method="filterNode"
            @check="handleCheck"
            :setCheckedNodes="setCheckedNodes"
            ref="tree"
          >
          </el-tree>

上面的node-key最好采用后端所返回的id,我这里是后端返回的id,id对不上的情况下,是不能实现单选的!id一定要对上。

 handleCheck(nodes, resolve) {
      //nodes节点所对应的对象;resolve选中状态对象
      if (resolve.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([nodes.orgStructureId]);
      }
    },
这里就是选择时候的代码,文档上面对setCheckedKeys有详细的说明,去参考下文档就能明白了

单选就这样实现了。懒加载就不用在说了。文档上面看就能明白

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值