解决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);
      })

 


版权声明:本文为liu_yulong原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。