86.el-tree设置第一层和第二层不可勾选但没有子节点的第一层可勾选

其实就是让后端返回数据时多返回一个字段type：

将没有子节点的那层type设置为0，叶子节点type为3，第一层type为1，第二层type为2；然后判断type为1或2时，给节点添加isChange=false，type为0或3时，isChange为true；然后再调用一个方法，循环树形数据，判断isChange为false时设置disabled为true；最后就是写样式了，带有is-disabled的设置display为none。

1.先把树写出来呗

<el-tree ref="tree" class="sourceTree" :data="treesData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"></el-tree>

 2.调用接口获取树形结构所需数据

        因为只有3层数据 所以遍历了3次 

getLinkModules(){

        ......

        this.treesData = JSON.parse(JSON.stringify(res.data))

        this.treesData.forEach(item =>{

                if(item.type == '1' || item.type == '2'){

                        item.isChange = false

                }else{

                        item.isChange = true

                }

                if(item.children){    

                      item.children.forEach(val =>{

                            if(val.type == '1' || val.type == '2'){

                                   val.isChange = false

                             }else{

                                   val.isChange = true

                             }

                             if(val.children){

                                    item.children.forEach(newItem =>{

                                            if(newItem.type == '1' || newItem.type == '2'){

                                                   newItem.isChange = false

                                             }else{

                                                   newItem.isChange = true

                                             }                             

                                      })

                             }

                      })

                }

        })

        // 调用方法为节点添加disabled属性

        this.setDisabled(this.treesData)

}

3.写方法为所有isChange为false的节点添加disabled属性

 setDisabled(treeData){

        if(treeData){

                treeData.forEach(item =>{

                        if(!item.isChange){

                                item.disabled = true

                                this.setDisabled(item.children)

                        }

                })

        }

}

4.写样式 把带有is-disabled的el-checkbox的display设置为none

// 为叶子节点添加dispaly:inline-block;

.sourceTree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{

        dispaly:inline-block;

 }

// 为不带is-leaf的节点添加display:none;

.sourceTreee .el-tree-node .el-checkbox .el-checkbox__inner{

        dispaly:none;

 }

// 为带有is-disabled的节点添加display:none;

.sourceTreee .el-tree-node .el-checkbox.is-disabled .el-checkbox__inner{

        dispaly:none;

 }

这样就可以啦~