ElementUI:tree给节点添加icon图标
时间: 2024-01-07 18:04:54 浏览: 773
要给 ElementUI 的 tree 组件的节点添加 icon 图标,可以通过在数据源中添加 `icon` 属性来实现。具体步骤如下:
1. 在数据源中添加 `icon` 属性,例如:
```
treeData: [
{
label: 'Node 1',
children: [
{
label: 'Child 1',
icon: 'el-icon-s-custom'
},
{
label: 'Child 2',
icon: 'el-icon-s-check'
}
]
}
]
```
2. 在 `el-tree` 组件中设置 `props` 属性,例如:
```
<el-tree :data="treeData" :props="{ label: 'label', children: 'children', icon: 'icon' }"></el-tree>
```
其中,`icon` 属性指定了节点的图标,对应数据源中的 `icon` 属性。
3. 在样式中设置图标样式,例如:
```
/* 自定义图标样式 */
.el-icon-s-custom:before {
content: '\e6a7';
font-family: 'element-icons';
font-size: 16px;
margin-right: 5px;
}
.el-icon-s-check:before {
content: '\e6a1';
font-family: 'element-icons';
font-size: 16px;
margin-right: 5px;
}
```
其中,`.el-icon-s-custom` 和 `.el-icon-s-check` 分别对应数据源中的 `icon` 属性值,`content` 属性指定了图标的 Unicode 字符码,`font-family` 属性指定了字体,`font-size` 属性指定了字体大小,`margin-right` 属性指定了图标与文字之间的距离。
这样就可以给 ElementUI 的 tree 组件的节点添加 icon 图标了。
阅读全文