elementUItree树形控件结合阿⾥图标icon修改三⾓图标样式需求：项⽬做类型⽂件j夹列表树，设计需要将三⾓图标替换成UI设计的icon，UI设计的icon放在了阿⾥图标库
// main.js中先引⼊iconfont的css和js
import'@/assets/iconfont/iconfont.css'
import'@/assets/iconfont/iconfont.js'
解决⽅案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 >
<i calss="iconfont icon-wendangdakai" width="20px" height="20px"></i>{{ node.label  }}
</span>
</span>
</el-tree>
这种⽅式出来的icon就会没有颜⾊，就要在css内设置需要的颜⾊，如果⽤svg的话直接就可以将原有颜⾊显⽰出来
<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 >
<iconSvg name="wendangdakai" width="20px" height="20px"></iconSvg>{{ node.label  }}
</span>
</span>
</el-tree>
封装的iconSvg
<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:{
icon图标库
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>
实现效果图
如果想要每个⼀级⽬录是不同的icon的话，直接在data数据内每级加个icon字段
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 >
<iconSvg :name="data.icon" width="20px" height="20px"></iconSvg>{{ node.label  }} </span>
</span>
</el-tree>
但是这种没办法实现展开和收起两个不同的icon
解决⽅案2
通过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__panded.el-icon-caret-right:before {
content:"\e85b";
font-size:25px;
font-family:"iconfont";
color:rgb(43,206,229)
}
.el-tree /deep/.el-tree-node__panded
{
-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>
在css⾥⾯content的内容是在引⼊的iconfont⽂件夹到iconfont.css中到对应的内容，font-family: “iconfont”;⼀定要写，这样才能出现图标
最后实现效果如图，展开何未展开就会有两种显⽰效果，且⽬录下⾯如果没有⼦集的话就会显⽰出⽂件icon⽽不是⽂件夹icon了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。