el-tree 默认选择几个节点,却全选中了

场景:某一级目录下有几个二级目录,当选中二级目录中的某一项并提交到后台后,页面渲染时却选中了整个一级目录,但是数据却是正常的一条二级目录。

解决办法:

比对该目录下未提交的目录,并将其checked设为false,这种方法能解决二级目录全选中的问题,但是会出现另一个小问题,虽然二级目录选择状态正常了,但是一级目录依然是全选中状态,如下:
在这里插入图片描述
所以,在比对完当前目录是否在已选列表内后,还需要对未全选的父级做不确定选项的展示处理,el-tree的不确定选项设置办法为

部分选:checked = false, indeterminate = true
全选:checked = true, indeterminate = false

贴上代码:

	<el-tree
            ref="menu"
            :data="menus"
            node-key="id"
            @node-expand="nodeClick"
            :default-checked-keys="menuIds"
            :props="defaultProps"
            show-checkbox
          />

	// 展开菜单时定位到选中菜单,子菜单非全选显示为不确定状态
    nodeClick (obj,node,component) {
      node.childNodes.forEach((item,index) => {
        if (item.childNodes.length > 0 && item.checked) {
          let cNode = item.childNodes, len = cNode.length;
          for (let i = 0; i < len; i++) {
             let tindex = this.menuIds.indexOf(cNode[i].data.id);
              if (tindex == -1) {
                item.childNodes[i].checked = false;
                item.childNodes[i].parent.checked = false;
                item.childNodes[i].parent.indeterminate = true;
              }
          }
        }
      })
    },

效果展示:
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值