根据有没有子节点来显示 前面是文件夹还是文件的图标 (因为遇到了就记录了下来)
如果有子节点(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了。