elementUI Tree的默认背景色不太清晰,通过查看dom树,找到设置此属性的地方,如下图,换成自己的颜色即可
自己重新封装tree组件,加上highlight-current属性
<template>
<div style="margin-top:10%;min-height:calc(100% - 60px);;border: 1px solid #dccdcd;">
<el-tree
:data="opt.treeData"
:node-key="opt.key"
:props="opt.defaultProps"
@node-click="handleNodeClick"
ref="tree"
:indent="indent"
highlight-current
></el-tree>
</div>
</template>
<script>
export default {
props: {
opt: {
type: Object
}
},
data() {
return {
indent:5,
};
},
methods: {
handleNodeClick(data, node, self) {
let key = this.$refs.tree.getCurrentKey();
let returnData ={'data':data,'key':key}
//获取数据id,后台通过ID获取类型与数据
this.$emit('getNodeId',returnData);
}
}
};
</script>
//使用的地方 不要加scoped
.el-tree-node.is-current > .el-tree-node__content {
background-color: #c2d6ea !important;
}