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

效果：

解决办法：

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

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

　　 :check-strictly="checkStrictly"                 :expand-on-click-node="false"                 highlight-current                 :props="defaultProps"                 @check="handleNodeCheck">          
     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         },  

相关

标签