解决element-ui的el-tree组件setCheckedKeys设置一旦选中父级子级也被选中

树初始化 

 <el-tree class="tree-border" :data="attributeOptions" show-checkbox ref="attribute" node-key="id"
                   :check-strictly="!form.attributeCheckStrictly"
                   empty-text="加载中,请稍后" :props="defaultProps"></el-tree>

加载的方法

 //分配标签
      handleAttribute(row) {
        this.reset();
        this.form.projectId = row.pid
        const attributes = this.listTreeAttribute(row.pid);
        this.open = true;
        this.title = "分配标签";
        this.$nextTick(() => {
          attributes.then(res => {
            // this.$refs.attribute.setCheckedKeys(res.checkedKeys);
     
          });
        });
      },

listTreeAttribute 返回数据格式 

{
	"msg": "操作成功",
	"code": 200,
	"attributes": [{
		"id": "000",
		"label": "A",
		"children": [{
			"id": "000000",
			"label": "A1"
		}]
	}, {
		"id": "001",
		"label": "B",
		"children": [{
			"id": "001000",
			"label": "bb2"
		}, {
			"id": "001001",
			"label": "bb3",
			"children": [{
				"id": "001001000",
				"label": "b33"
			}]
		}]
	}, {
		"id": "002",
		"label": "C",
		"children": [{
			"id": "002000",
			"label": "c1"
		}, {
			"id": "002001",
			"label": "c2"
		}, {
			"id": "002002",
			"label": "C55"
		}]
	}, {
		"id": "004",
		"label": "E",
		"children": [{
			"id": "004000",
			"label": "E1"
		}, {
			"id": "004001",
			"label": "e2"
		}]
	}, {
		"id": "005",
		"label": "f",
		"children": [{
			"id": "005000",
			"label": "f1"
		}]
	}],
	"checkedKeys": ["000000", "001", "001001", "000", "001000"]
}

加载回显方法,官方推荐的方法不好用

handleAttribute(row) {
  this.reset();
  const attributes = this.listTreeAttribute();
  this.open = true;
  this.title = "分配标签";
  this.$nextTick(() => {
    attributes.then(res => {
       this.$refs.attribute.setCheckedKeys(res.checkedKeys);
    });
  });
},
解决方案

     this.$refs.attribute.setCheckedKeys(res.checkedKeys);
替换成 
     res.checkedKeys.forEach(value => {
        this.$refs.attribute.setChecked(value, true, false);
      })

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值