element-ui el-tree选择子节点时同时选择并提交父节点逻辑问题

Posted 2023-02-28

参考技术A el-tree 组件在获取选择的节点时，默认的逻辑是，选中父节点时所有的子节点会被选中（ checked ），但是当该节点下不是选中所有子节点的时候，主节点不会被选中，而是处于一种半选中状态，提交时通过 getCheckedKeys() 方法也不会提交父节点，因为半选中状态下 checked 属性是 false 的。

解决办法
通常如果只是为了提交数据，我们可以使用 getHalfCheckedKeys() + getCheckedKeys() 来获取需要的数据

但是如果需要保存数据且需要编辑，那在编辑初始设置选中项的时候将遇到问题，所以我们只能使用 el-tree 现有的api来自己实现需要的功能， el-tree 中有一个属性 check-strictly （在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false）意思就是勾选父节点和勾选子节点，没有任何的关系。这是为了解决默认选中节点加载时，选中父节点会同时选中所以子节点，显然这不是我们想要的。

然后使用 check-change 事件（节点选中状态发生变化时的回调）