vue如何在引入的el-tree前添加图标
作者：毅争晨夕
这篇文章主要介绍了vue如何在引入的el-tree前添加图标问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue引入的el-tree前添加图标
根据有没有子节点来显示 前面是文件夹还是文件的图标 （因为遇到了就记录了下来）
如果有子节点(children)，就在前面加上一个文件夹的图标(片)，如果没有子节点，就显示的是文件的图标(片)
只有部分代码，在要push的地方添加一个icon，然后动态绑定这个icon，注意名字要一样；
<template>
<div>
<el-tree
ref="addre"
:load="loNo"
:props="default-props"
lazy
node-key="id"
show-checkbox
:check-strictly="true"
@check="heiChange"
highlight-current
:key="this.sho"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="data.label" :class="folder">{{ `(${data.label})` }}</span>
<span v-if="!data.label" :class="data.icon"></span> //注意此处是动态的绑定下面 push进去定义好的icon名称；
<span>{{ node.label }}</span>
</span>
</el-tree>
</div>
</template><script>
export default {
data() {
return {
folder:'iconFolder', //显示文件夹 下面有css样式
file:'iconFile', //显示文件 下面有css样式
};
}，
methods：{ //省略的点点不重要，
loNo(aa,bb){
var data = []
//....
if (res.folders) {
//....
data.push({
//....
icon:this.folder //在这里追加个icon就行了，然后调上面data里的名称
})
//....
}，
if (res.files) {
//....
data.push({
//....
icon:this.files //在这里追加个icon就行了，然后调上面data里的名称
})
//....
}，
}
}
};
</script>//样式
<style scoped>
.iconFolder::before{ //样式名称与data里的对应
/* background-color: aqua; */
content:'';
/* float: left; */
display: inline-block;
width: 15px;
height: 15px;
/* border: 1px solid#000; */
background: url(../../assets/img/wenjianjia.png) no-repeat;
background-size: 15px;
}
.iconFile::before{ //样式名称与data里的对应
/* background-color: aqua; */
content:'';
/* float: left; */
display: inline-block;
width: 15px;
height: 15px;
/* border: 1px solid#000; */
background: url(../../assets/img/wenjian.png) no-repeat;
background-size: 15px;
}
</style>还有一个方法我在看其他内容发现，也是在span标签里套用了俩个img标签 进行判断他们children的长度，如果大于0，就显示这个图片，不用再push里添加icon了，因为用的是img标签，所以图片直接放在了img上的src里了，就不用在这写css了。
ElementUI el-tree树形控件给节点添加图标
<template>
<div class="tree">
<el-tree :data="data5" node-key="id" default-expand-all >
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i :class="data.icon"></i>{{ node.label }}
</span>
</span>
</el-tree>
</div>
</template><script>
export default {
data () {
return {
data5: [{
id: 1,
label: '一级 1',
icon:'el-icon-success',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
icon: 'el-icon-info'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1',
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
}
}
</script>
<style scoped>
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。