修改elementui的tree组件展开三角图标分别两套图标,一级一套,子级另外一套
时间: 2024-03-23 20:41:47 浏览: 140
修改elementUI的样式
要修改elementui的tree组件展开三角图标,分别使用两套不同的图标,一级节点使用一套图标,子级节点使用另一套图标,可以使用CSS样式来实现。以下是一些示例代码:
1. 修改一级节点的展开图标为第一套自定义图标,折叠图标为第二套自定义图标,子级节点的展开图标为第三套自定义图标,折叠图标为第四套自定义图标:
```css
/* 一级节点展开图标的样式 */
.el-tree-node.level-1 .el-tree-node__expand-icon::before {
content: "\e622"; /* 第一套自定义图标的Unicode编码 */
font-family: "iconfont1"; /* 第一套自定义图标字体的名称 */
}
/* 一级节点折叠图标的样式 */
.el-tree-node.level-1 .el-tree-node__collapse-icon::before {
content: "\e623"; /* 第二套自定义图标的Unicode编码 */
font-family: "iconfont2"; /* 第二套自定义图标字体的名称 */
}
/* 子级节点展开图标的样式 */
.el-tree-node:not(.level-1) .el-tree-node__expand-icon::before {
content: "\e624"; /* 第三套自定义图标的Unicode编码 */
font-family: "iconfont3"; /* 第三套自定义图标字体的名称 */
}
/* 子级节点折叠图标的样式 */
.el-tree-node:not(.level-1) .el-tree-node__collapse-icon::before {
content: "\e625"; /* 第四套自定义图标的Unicode编码 */
font-family: "iconfont4"; /* 第四套自定义图标字体的名称 */
}
```
2. 修改一级节点的展开图标为第一套自定义图标,折叠图标为第二套自定义图标,子级节点的展开图标为第三套自定义图片,折叠图标为第四套自定义图片:
```css
/* 一级节点展开图标的样式 */
.el-tree-node.level-1 .el-tree-node__expand-icon::before {
content: "\e622"; /* 第一套自定义图标的Unicode编码 */
font-family: "iconfont1"; /* 第一套自定义图标字体的名称 */
}
/* 一级节点折叠图标的样式 */
.el-tree-node.level-1 .el-tree-node__collapse-icon::before {
content: "\e623"; /* 第二套自定义图标的Unicode编码 */
font-family: "iconfont2"; /* 第二套自定义图标字体的名称 */
}
/* 子级节点展开图标的样式 */
.el-tree-node:not(.level-1) .el-tree-node__expand-icon::before {
content: "";
background-image: url("path/to/image1.png"); /* 第三套自定义图片的路径 */
background-size: contain;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
/* 子级节点折叠图标的样式 */
.el-tree-node:not(.level-1) .el-tree-node__collapse-icon::before {
content: "";
background-image: url("path/to/image2.png"); /* 第四套自定义图片的路径 */
background-size: contain;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}
```
需要注意的是,以上代码中的图标或图片需要自行准备,可以使用iconfont等工具来生成自定义字体图标。同时,需要将以上代码放置在全局CSS中或者在组件内部使用scoped CSS进行样式覆盖。
阅读全文