修改elementui的tree组件展开三角图标分别两套图标
时间: 2023-10-16 21:07:21 浏览: 141
ElementUI Tree 树形控件的使用并给节点添加图标
要修改elementui的tree组件展开三角图标,分别使用两套不同的图标,可以使用CSS样式来实现。以下是一些示例代码:
1. 修改默认的展开图标为第一套自定义图标,折叠图标为第二套自定义图标:
```css
/* 展开图标的样式 */
.el-tree-node__expand-icon::before {
content: "\e622"; /* 第一套自定义图标的Unicode编码 */
font-family: "iconfont1"; /* 第一套自定义图标字体的名称 */
}
/* 折叠图标的样式 */
.el-tree-node__collapse-icon::before {
content: "\e623"; /* 第二套自定义图标的Unicode编码 */
font-family: "iconfont2"; /* 第二套自定义图标字体的名称 */
}
```
2. 修改默认的展开图标为第一套自定义图标,折叠图标为第二套自定义图片:
```css
/* 展开图标的样式 */
.el-tree-node__expand-icon::before {
content: "\e622"; /* 第一套自定义图标的Unicode编码 */
font-family: "iconfont1"; /* 第一套自定义图标字体的名称 */
}
/* 折叠图标的样式 */
.el-tree-node__collapse-icon::before {
content: "";
background-image: url("path/to/image.png"); /* 第二套自定义图片的路径 */
background-size: contain;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
```
需要注意的是,以上代码中的图标或图片需要自行准备,可以使用iconfont等工具来生成自定义字体图标。同时,需要将以上代码放置在全局CSS中或者在组件内部使用scoped CSS进行样式覆盖。
阅读全文