关于a-tree中属性 checkStrictly 在使用中 切换true或者false时候出现的问题

[13417094465]

最近遇到一个很奇怪的需求 需求如下

权限列表 默认支持单独选择树的任何一项 不关联父子 a-tree设置checkStrictly为true即可 后来 用户操作的时候需要改为父子级联 并且之前的选中是不可以乱的 就是checkStrictly变为false

个人解决方法如下

tree属性重点如下

:checkStrictly="checkStrictly" @check="onCheck"
onCheck方法如下 写法为vue3写法 大同小异 halfCheckedKeys为半关联（就是子集没打钩满 通过这个第二个参数可以得到）的存储
function onCheck(o, e) { if (e) { halfCheckedKeys.value = e.halfCheckedKeys || []; } checkedKeys.value = o.checked ? o.checked : o; }
关键来了 当我们切换后数据是不对的 例如独自选项 我们选了1-1 转成父子关联 1-1-1 1-1-2都打勾了 可是你获取getCheckedKeys()方法是只会拿到1-1这个数据 解决方法如下
//开启关联 模拟点击一次 try { nextTick(() => { let dom = document.getElementsByClassName('ant-tree-checkbox'); dom[0].click(); setTimeout(() => { dom[0].click(); }, 0); }); } catch (e) {}
模拟点击 触发oncheck事件 当你触发了oncheck事件 所打勾的都会传到o,e两个参数里面 自然就解决了~~~~我是小伟如果解决你的问题麻烦点个赞呀

[thelongmarch]

思路差不多，但是个人试了在setTimeout的时候第二次dom不知道为啥获取不到。个人优化过的方案：寻找一个末级节点，并设置其class，找到对应的元素，触发两次点击，因为发现点击了之后关联非关联勾选的key值就能对应上。
添加末级节点class为finalNode，只需要寻找一个即可

  treeData.some(rootNode => that.addClassToFirstLeafNode(rootNode, 'finalNode'));
  that.treeData = treeData;

方法addClassToFirstLeafNode

addClassToFirstLeafNode(node, className) {
                // 检查当前节点是否为末级节点（没有子节点）
                if (!node.children || node.children.length === 0) {
                    // 为末级节点增加 'class' 字段
                    node.class = className;
                    // 返回 true 表示已找到末级节点并修改
                    return true;
                } else {
                    // 如果不是末级节点，递归遍历其子节点
                    for (let child of node.children) {
                    // 如果找到末级节点并已修改，则停止遍历
                    if (this.addClassToFirstLeafNode(child, className)) {
                        return true;
                    }
                    }
                }
                // 如果当前节点及其子节点都不是末级节点，返回 false
                return false;
            }

最后在切换的时候处理找到之前添加的dom元素，并触发点击事件

 switchCheckStrictly (v) {
                if(v==1){
                    this.checkStrictly = false
                }else if(v==2){
                    this.checkStrictly = true
                }
                let _self = this
                try { 
                    _self.$nextTick(() => {
                        // 获取包含特定类的父元素
                        let parentElement = document.querySelector('.finalNode');

                        // 在父元素下查找具有特定类的子元素
                        let dom = parentElement.querySelectorAll('.ant-tree-checkbox');                            
                        dom[0].click(); 
                        setTimeout(() => {
                            dom[0].click(); 
                        }, 0);
                    });
                } catch (e) {                        
                    console.log(e)
                }
            }

tip:
问题出现的场景：在父子不关联情况下，全部勾选了某个父节点的子集但不勾选父级，然后由父子不关联切换到父子关联，这个时候父级会被勾选，但是打印的时候没有这个父节点。
原本以为只有不关联切换到关联有问题，后来发现关联切换到不关联某些场景也有问题，所以我把代码放在了下面，只要切换了都会触发这个方法。

[wubiandaxian]

我现在就需要做这样的一个功能，这个需求并不奇怪。
场景如下：

当我从接口获取数据的时候，我需要把已经选中的数据反选上。这个时候就出现了问题，如果checkStrictly为true，就会出现父节点被选中了，子结点也会自动选中的情况，实际在数据层面上子结点可能并未选中（比如我授权了页面查看权限，但是没有给里面的按钮操作权限）。所以只能把checkStrictly设置为false。这样反选的时候数据层面和页面显示会保持统一。

但是在操作的时候，作为一个用户来说，当我选中父结点的时候，自然认为子节点应当自动勾选上。但是在checkStrictly为fasle的时候，达不到这种效果。

所以，组件的设计效果和实际的需求造成了冲突