el-tree 点击选中样式修改
时间: 2023-08-07 10:02:20 浏览: 1405
修改iview-ui tree树结构默认的小三角形源码
根据引用\[1\]和引用\[2\]的内容,要修改el-tree的点击选中样式,可以使用以下样式代码:
```css
/deep/ .el-tree-node.is-current > .el-tree-node__content {
background: rgba(22, 119, 255, 0.1);
border-right: 3px solid #1677ff;
color: #187aff;
}
/deep/ .el-tree-node__expand-icon {
color: rgb(0, 112, 255);
}
/deep/ .is-leaf {
color: rgba(0, 0, 0, 0);
}
```
这段代码会修改选中节点的背景颜色、边框样式和文字颜色。同时,还会修改展开图标的颜色和叶子节点的文字颜色。通过/deep/选择器可以穿透组件的样式隔离,使得样式能够生效。
另外,根据引用\[3\]的内容,如果想要实现el-tree的默认选中功能,可以使用current-node-key属性。但需要注意一些细节和坑,具体可以参考文档进行操作。
#### 引用[.reference_title]
- *1* [el-tree 设置选中添加样式](https://blog.csdn.net/qq_36410795/article/details/113251587)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [页面跳转,el-tree动态设置选中节点样式](https://blog.csdn.net/weixin_42190844/article/details/120080241)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文