修改element-ui tree树结构前的图标，及树形结构的样式

因项目需求，需修改tree树结构的图标，以及树形的字体样式等；

代码如下：

<template><div class="FormMaintain"><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"><span class="custom-tree-node" :class="data.class" slot-scope="{ node, data }"><span><i :class="data.icon"></i>{{ node.label }}</span>              </span></el-tree></div>
</template><script>
export default {data() {return {data: [{label: '一级1',class:'secondOne',icon:'el-icon-star-on',children: [{label: '左岸1',class:'secondOne',children: [{label: '左岸帷幕',class:'levelsThree',},{label: '右岸帷幕',class:'levelsThree',}]}]}, {label: '一级 2',icon:'el-icon-s-data',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '一级 3',icon:'el-icon-user-solid',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}
};
</script><style lang="less" scoped>
@radius:8px;
@bColor:#fff;
@fontSize:0.94rem;
.el-tree-node__content{font-size: @fontSize;line-height: 2rem;
}
.secondOne{color: royalblue;
}
.levelsThree{color: cornflowerblue;
}
</style>

效果如下：

修改element-ui tree树结构前的图标，及树形结构的样式相关推荐

修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue element ui引入阿里库的图标
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
element ui tree增删改查_clientgo连接K8s集群进行pod的增删改查
背景最近在看client-go源码最基础的部分,client-go的四类客户端,RestClient.ClientSet.DynamicClient.DiscoveryClient.其中RestCl ...
vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
element ui tree结构双击单机右键事件
<el-tree:data="data":props="defaultProps"@node-click="handleNodeClick&qu ...

修改element-ui tree树结构前的图标，及树形结构的样式

修改element-ui tree树结构前的图标，及树形结构的样式相关推荐

最新文章

热门文章