网站建设开发文档/上海快速排名优化
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年，从今天起，一些工作上遇到的问题，解决好后要及时写博客记录，以备日后查看。