Requisitos: el proyecto es un árbol de lista de carpetas de tipo carpeta j. El diseño debe reemplazar el ícono del triángulo con el ícono de diseño de la interfaz de usuario. El ícono de diseño de la interfaz de usuario se coloca en la biblioteca de íconos de Alibaba.
// main.js中先引入iconfont的css和js
import '@/assets/iconfont/iconfont.css'
import '@/assets/iconfont/iconfont.js'
Solución 1.
<el-tree
:data="getPerSrcTree"
default-expand-all
:expand-on-click-node="false"
node-key="id"
ref="atree"
highlight-current
:check-strictly="true"
:props="defaultProps"
@node-click="nodeClick"
>
<span class="custom-tree-node" slot-scope="{ node }">
<span style="display: flex;align-items: center;">
<i calss="iconfont icon-wendangdakai" width="20px" height="20px"></i>{
{
node.label }}
</span>
</span>
</el-tree>
El icono producido de esta manera no tendrá color, por lo que debe configurar el color requerido en CSS. Si usa SVG, puede mostrar directamente el color original.
<el-tree
:data="getPerSrcTree"
default-expand-all
:expand-on-click-node="false"
node-key="id"
ref="atree"
highlight-current
:check-strictly="true"
:props="defaultProps"
@node-click="nodeClick"
>
<span class="custom-tree-node" slot-scope="{ node }">
<span style="display: flex;align-items: center;">
<iconSvg name="wendangdakai" width="20px" height="20px"></iconSvg>{
{
node.label }}
</span>
</span>
</el-tree>
Icono encapsuladoSvg
<template>
<svg
:class="getClassName"
:width="width"
:height="height"
aria-hidden="true">
<use :xlink:href="getName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
name: {
type: String,
required: true
},
className: {
type: String
},
width: {
type: String,
default:"40px"
},
height: {
type: String,
default:"40px"
}
},
computed: {
getName () {
return `#icon-${
this.name}`
},
getClassName () {
return [
'icon-svg',
`icon-svg__${
this.name}`,
this.className && /\S/.test(this.className) ? `${
this.className}` : ''
]
}
}
}
</script>
<style>
.icon-svg {
fill: currentColor;
overflow: hidden;
}
</style>
Representaciones de realización
Si desea que cada directorio de primer nivel tenga un ícono diferente, agregue directamente un campo de ícono a cada nivel de los datos.
getPerSrcTree: [{
label: '一级 1',
icon:'wendangdakai',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
<el-tree
:data="getPerSrcTree"
default-expand-all
:expand-on-click-node="false"
node-key="id"
ref="atree"
highlight-current
:check-strictly="true"
:props="defaultProps"
@node-click="nodeClick"
>
<span class="custom-tree-node" slot-scope="{ node,data }">
<span style="display: flex;align-items: center;">
<iconSvg :name="data.icon" width="20px" height="20px"></iconSvg>{
{
node.label }}
</span>
</span>
</el-tree>
Pero no hay forma de expandir y contraer dos íconos diferentes.
Solución 2
Modificar mediante estilo css
<el-tree
:data="getPerSrcTree"
default-expand-all
:expand-on-click-node="false"
node-key="id"
ref="atree"
highlight-current
:check-strictly="true"
:props="defaultProps"
@node-click="nodeClick"
></el-tree>
<style scoped>
.el-tree /deep/ .el-icon-caret-right:before{
content: "\e85a"; //在引入的iconfont文件夹找到iconfont.css
font-size: 25px;
font-family: "iconfont"; //想要显示icon这个必须加
color:rgb(43, 206, 229) //想要的颜色
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
content: "\e85b";
font-size: 25px;
font-family: "iconfont";
color:rgb(43, 206, 229)
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded
{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 没有子节点 */
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
{
font-size: 25px;
content: '\e85d';
font-family: "iconfont";
color:rgb(43, 206, 229)
}
</style>
El contenido del contenido en CSS es buscar el contenido correspondiente en iconfont.css en la carpeta iconfont importada Font-family: "iconfont"; debe escribirse para que el icono pueda aparecer.
El efecto final es como se muestra en la figura: habrá dos efectos de visualización si se expande o no, y si no hay un subconjunto en el directorio, se mostrará el ícono de archivo en lugar del ícono de carpeta.
