关于eleTree的选中问题,(setChecked后和重置,全选后)

在使用eleTree时发现,当使用el.expandAll()方法展开所有时,会重新生成树状结构,会按照默认选中重新渲染(defaultCheckedKeys),在修改了defaultCheckedKeys数组后,渲染的始终是使用这个数组

  • 这样就有个问题,我之前手动选中的节点,在点击展开后将不复存在.于是就想到是不是应该在点击节点的同时,删除或者添加key到defaultCheckedKeys数组
  • 试了一些办法,最后这种笨方法貌似达到了我要的效果(测试了下好像没问题),但是我对于 @凉宫
    大神源码也没做深入的研究,在此贴出,希望能帮到需要的朋友,同时也希望有大神能进行一些指正,或者提出更好的办法

修改如下


 // checkbox选中
        checkboxEvent: function() {
            var options=this.config;
            var _self=this;
            var checkOnClickNode=options.checkOnClickNode?".eleTree-node-content":".eleTree-checkbox";
            // input添加属性eleTree-status:即input的三种状态,"0":未选中,"1":选中,"2":子孙部分选中
            options.elem.on("click",checkOnClickNode,function(e,type) {
                e.stopPropagation();
                var eleTreeNodeContent=$(this).parent(".eleTree-node").length===0?$(this).parent(".eleTree-node-content"):$(this);
                var checkbox=eleTreeNodeContent.children(".eleTree-checkbox");
                if(checkbox.hasClass("eleTree-checkbox-disabled")) return;
                // 获取点击所在数据
                var node=eleTreeNodeContent.parent(".eleTree-node");
                 var d=_self.reInitData(node).currentData;
                // 实际的input
                var inp=checkbox.siblings(".eleTree-hideen").get(0);
                var childNode=eleTreeNodeContent.siblings(".eleTree-node-group").find("input[name='eleTree-node']");

                // 添加active背景
                if(_self.prevClickEle) _self.prevClickEle.removeClass("eleTree-node-content-active");
                if(options.highlightCurrent) eleTreeNodeContent.addClass("eleTree-node-content-active");
                _self.prevClickEle=eleTreeNodeContent;
                
                if(!inp){
                    return;
                }
//===========================================修改 begin======================================//
                //递归删除和添加defaultCheckedKeys方法,取消最里面的key.------------------------------------------------------.修改
                function getfooterkey(d, add) {
                    if (d.children) {
                        $.each(d.children, function () {
                            getfooterkey(this,add);
                        })
                    } else {
                        if (!add && ((index = options.defaultCheckedKeys.indexOf(d.id)) !== -1)) {
                            options.defaultCheckedKeys.splice(index, 1);
                        } else if (add && $.inArray(d.id, options.defaultCheckedKeys) === -1) {
                            options.defaultCheckedKeys.push(d.id);
                        }
                    }
                        
                }
//===========================================修改 end======================================//
                if (inp.checked) {
                    // 反选自身
                    $(inp).prop("checked",false).attr("eleTree-status","0");
                    // 点击祖父层选中子孙层
                    if(!options.checkStrictly){
                        childNode.prop("checked",false);
                        childNode.attr("eleTree-status","0");
                    }
//===========================================修改 begin======================================//
                    //删除父元素keys----------------------------------------------------------------------修改
                    var oNode = node;
                    while (oNode.length != 0) {
                        oNode = oNode.closest(".eleTree-node");
                       if ((index = options.defaultCheckedKeys.indexOf($(oNode).data("id"))) !== -1) {
                           options.defaultCheckedKeys.splice(index, 1);
                       }
                       oNode = oNode.closest(".eleTree-node-group");
                    }
                    getfooterkey(d);
//===========================================修改 end======================================//
                }else{
                    // 反选自身
                    $(inp).prop("checked",true).attr("eleTree-status","1");
                    // 点击祖父层选中子孙层
                    if(!options.checkStrictly){
                        childNode.prop("checked",true).attr("eleTree-status","1");
                    }
//===========================================修改 begin======================================//
                    getfooterkey(d,true);
//===========================================修改 end======================================//
                }

                var eleNode=eleTreeNodeContent.parent(".eleTree-node");
                // 点击子孙层选中祖父层(递归)
                if(!options.checkStrictly){
                    var siblingNode=eleNode.siblings(".eleTree-node");
                    // 点击子孙层选中祖父层(递归)
                    _self.selectParents(inp,eleNode,siblingNode);
                }
                
                _self.checkboxRender();

                if(type==="default") return;
                layui.event.call(inp, MOD_NAME, 'nodeChecked('+ _self.filter +')', {
                    node: eleNode,
                    data: _self.reInitData(eleNode),
                    isChecked: inp.checked
                });
            })
        },

为了看的明白,我将整个checkboxEvent方法拷贝了…只需替换源码这个方法即可。

setChecked(arr, isReset),第二个参数为真时替换原默认选中数组,否则是在默认数组末尾添加

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-tree 的懒加载功能是通过动态加载子节点来实现的,因此在开启懒加载后,如果要实现全选功能,需要对 el-tree 的数据结构进行一些调整。 具体来说,你需要在每个节点的数据对象中添加一个 `isLoaded` 字段来标记该节点是否已经加载过子节点,同时在加载子节点时,需要将该字段设置为 `true`。 另外,在 el-tree全选功能实现中,会遍历所有节点来设置选中状态,但是在开启懒加载后,由于只有部分节点被加载,因此需要修改遍历逻辑,只遍历已经加载的节点,将它们的选中状态设置为与父节点相同。 下面是一个示例代码,可以参考一下: ```html <template> <el-tree :data="treeData" show-checkbox :check-strictly="true" :default-expand-all="true" @check-change="handleCheckChange" :load="lazyLoad" ></el-tree> </template> <script> export default { data() { return { treeData: [ { id: 1, label: 'Node 1', children: [], isLoaded: false }, { id: 2, label: 'Node 2', children: [], isLoaded: false }, { id: 3, label: 'Node 3', children: [], isLoaded: false } ] }; }, methods: { lazyLoad(node, resolve) { if (!node.isLoaded) { // 模拟异步加载子节点 setTimeout(() => { node.children = [ { id: node.id * 10 + 1, label: `Node ${node.id * 10 + 1}` }, { id: node.id * 10 + 2, label: `Node ${node.id * 10 + 2}` } ]; node.isLoaded = true; resolve(); }, 1000); } else { resolve(); } }, handleCheckChange(data) { const checkedNodes = this.$refs.tree.getCheckedNodes(true); const uncheckedNodes = this.$refs.tree.getCheckedNodes(false); const indeterminateNodes = this.$refs.tree.getHalfCheckedNodes(); const checkedKeys = checkedNodes.map(node => node.id); const uncheckedKeys = uncheckedNodes.map(node => node.id); const indeterminateKeys = indeterminateNodes.map(node => node.id); this.treeData.forEach(node => { if (node.isLoaded) { if (checkedKeys.includes(node.id)) { this.$refs.tree.setChecked(node, true); } else if (uncheckedKeys.includes(node.id)) { this.$refs.tree.setChecked(node, false); } else if (indeterminateKeys.includes(node.id)) { this.$refs.tree.setChecked(node, null); } } }); } } }; </script> ``` 在这个示例中,我们添加了一个 `isLoaded` 字段来标记节点是否已经加载过子节点,并在 `lazyLoad` 方法中设置这个字段。在 `handleCheckChange` 方法中,我们只遍历已经加载的节点,并将它们的选中状态设置为与父节点相同。 希望这个示例对你有帮助!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值