Vue el-tree组件,得到后台数据渲染时,选择父级会全选所有的子级 解决办法


效果:

解决办法:

check-strictly:在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。

  1、设置check-strictly 是一个变量checkStrictly,默认值是false    

   <el-tree 
                :data="rolesTree"
                show-checkbox
                default-expand-all
                ref="rolestree"
                node-key="Id"
                :default-checked-keys="defaultCheckedNode"
                 :check-strictly="checkStrictly"
                :expand-on-click-node="false"
                highlight-current
                :props="defaultProps"
                @check="handleNodeCheck">
        </el-tree>
     checkStrictly:false,

  2、获取数据后,

        getRolesTree (params) { 
            role.getRolesTree(params).then(res => {
                this.rolesTree = res.data.Data;  
                this.checkStrictly = true,  //给树节点赋值之前,先设置为true
                this.$nextTick(() => {
                    setTimeout(()=>{                     
                        //渲染
                        this.defaultCheckedNode = this.getArray(this.rolesTree, true, []);                           
                        this.$refs.rolestree.setCheckedNodes(this.defaultCheckedNode);   //给树节点赋值
                        this.checkStrictly = false;    //赋值完成后设置为false
                    },0)
                })
            })
        },
        getArray (data, name, lst) {
            var tempArr = lst, _this = this;
            data.map(item => {             
                if (item.Disabled == name) {                
                    tempArr.push(item.Id);
                    if (!!item.Children && (typeof item.Children) == "object") {
                        _this.getArray(item.Children, name, tempArr);
                    }

                } else {
                    if (!!item.Children && (typeof item.Children) == "object") {
                        _this.getArray(item.Children, name, tempArr);
                    }

                }
            })
            return tempArr
        },
 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM