85.解决el-tree默认选中第一个节点且选中时更改背景色字体等以及设置鼠标悬浮时只有叶子节点为小手状态

1.解决el-tree默认选中第一个节点

首先在<el-tree>添加 :default-expanded-keys="expandDefault" ，然后在获取tree数据后将数组的第一个元素id放进数组expandDefault里，最后在watch内监听expandDefault数组，改变新值后设置点击该行（但是click会报错 还没解决 不过不影响选中效果）

<el-tree ........ :default-expanded-keys="expandDefault"></el-tree>

data(){

        return{

                expandDefault:[],

        }

}

methods:{

        // 获取tree数据

        getLinkModules(data){

                .......

                this.expandDefault.push(res.data[0].id)

        }

}

watch:{

        'expandDefault':function(newVal,oldVal){

                if(newVal){

                        this.$nextTick(() =>{

                                document.querySelector('.el-tree-node_content').click()

                        })

                }

        }

}

2.el-tree选中节点时更改其背景颜色、字体颜色

首先在<el-tree>添加highlight-current ，然后在<style></style>添加对应的样式（这里要注意在点击父节点时取消其子节点样式），记得给el-tree元素外层元素添加class名区分一下（我这里给它的上层元素添加的class名为：organization_configuration）

<el-tree ...... highlight-current >

<style>

        .organization_configuration .el-tree--highlight-current .el-tree-node.is-current .el-tree-node_content{

        background-color:rgb(135,206,235,0.2);

        color:#000;

        font-weight:bold;

}

        .organization_configuration .el-tree--highlight-current .el-tree-node.is-current .el-tree-node_children .el-tree-node.is-expanded .el-tree-node_content{

        background-color:#fff!important;

        color:#606266!important;

        font-weight:100!important;

}

</style>

3.设置鼠标悬浮时只有叶子节点为小手状态

这里后端接口返回的数据叶子节点的type为0或3，type为1和2的都是父节点，所以先获取所有class名为el-tree-node_content的元素，改为数组，遍历该数组，然后在其内再遍历tree数据的数组，因为默认都是小手状态，所以判断type为1或2时，对该元素style样式做处理

methods:{

        // 获取tree数据

        getLinkModules(data){

                ......

                this.$nextTick(() =>{

                         let itemArr = document.querySelectAll(".el-tree-node_content")

                        Array.from(itemArr).map(item =>{

                                res.data.map(item1 =>{

                                        if(item.innerText.includes(item1.name) && (item1.type == '1' || item1.type == '2')){

                                                item.style.cursor = 'text'

                                        }else{

                                                item1.children.map(item2 =>{

                                                        if(item.innerText.includes(item2.name) && (item2.type == '1' || item2.type == '2')){

                                                                item.style.cursor = 'text'

                                                        }

                                                })

                                        }

                                })

                        })

                 })

        }

}

以上就是这3个问题解决方法了，距离上一篇发布已过去整整1年，从今天起，一些工作上遇到的问题，解决好后要及时写博客记录，以备日后查看。