一. 改变tree原生的样式
点击时样式
.el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content {
background-color: #EDF3FC !important;
border-radius: 8px;
}
重新设置tree的宽高
.el-tree ::v-deep.el-tree-node > .el-tree-node__content{
width: 264px;
height: 40px;
}
鼠标hover是改变背景颜色
.el-tree ::v-deep.el-tree-node > .el-tree-node__content:hover {
background-color: #EDF3FC !important;
border-radius: 8px;
}
颜色高亮
::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #EDF3FC !important;
border-radius: 8px;
}
二. 在tree中添加数量
<el-tree :data="catalogData.catalogList" :props="defaultProps" :highlight-current="true" accordion @node-click="handleNodeClick">
<div slot-scope="{ node, data }" class="showname">
<el-tooltip
class="item"
effect="dark"
:content="node.label"
placement="right-end"
>
<div
style="display:flex;justify-content: space-between;
align-items: center;"
>
<span class="showname-span"> {{ node.label }} </span>
<span>
{{ data.num }}
</span>
</div>
</el-tooltip>
</div>
</el-tree>
事件node-click
handleNodeClick(data) {
conosle.log(data)
}
三. 实现效果