vue引入的el-tree前添加图标

根据有没有子节点来显示前面是文件夹还是文件的图标（因为遇到了就记录了下来）

如果有子节点(children)，就在前面加上一个文件夹的图标(片)，如果没有子节点，就显示的是文件的图标(片)

只有部分代码，在要push的地方添加一个icon，然后动态绑定这个icon，注意名字要一样；

<template><div><el-treeref="addre":load="loNo":props="default-props"lazynode-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了。

vue引入的el-tree前添加图标相关推荐

openlayers6【二十二】vue addLayer实现点击地图添加图标要素信息，编辑点位信息
文章目录 1.写在前面 2. 地图点击事件singleclick 2.1 点击获取经纬度,调用创建mark要素的方法 2.2 实现根据经纬度创建mark要素,设置mark样式,添加到图层,创建要素标题 ...
为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
如何在网页标题前添加图标
在前端中,我们为了页面的美化有时需要给标题前面添加图标.今天,我们来看一下如何添加: 首先,先看一下只添加标题的结果 <!DOCTYPE html> <html> <he ...
vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息
先看效果这里引入的是百度地图,根据下图操作即可(选择的是浏览器端,也可以用3.0或者2.0,这里用到的是GL) 获取ak后把这段代码放在index里 <script type="te ...
Vue+Openlayer实现点击地图添加图标要素信息，编辑点位信息
效果图: 实现代码: <template><div><div id="map" ref="map" style="wid ...
怎么在浏览器网站前添加图标（图片）
大家在浏览很多网站的时候都会发现在浏览器的地址栏前面会有一个小图标,在浏览器的标签位置也有一个小图标,例如 CSDN是个C .网易163邮箱是个"易".360浏览器是他们的logo ...
Vue 引入第三方图标库
我的项目是Vue+element,由于这个element中的图标比较少,所以咋们引入阿里云的图标阿里云图标库地址:https://www.iconfont.cn/home/index 首先你要有个阿 ...
vue引入阿里巴巴iconfont图标(简单易懂)
vue引入并使用阿里巴巴iconfont图标流程为什么要使用阿里图标库: 有些时候你需要的图标是真的在elementul里没有的或者完全不适合的. 这时候我们需要去到阿里的图标库里找找,这里的图标非 ...
如何在页面标题前添加自己的logo图标
如何在页面标题前添加自己的logo图标?如下图所示下面给介绍两种方式: 1.如果你使用的是tomcat,并且你的tomcat下面项目可以使用统一logo,那么可以直接修改tomcat ROOT目录下 ...

vue引入的el-tree前添加图标

vue引入的el-tree前添加图标相关推荐

最新文章

热门文章