Element 树组件使用及换肤 - 同步

￡神魔★判官ぃ 2022-12-07 15:19 148阅读 0赞

Tree

// 基础布局
    <div class="treeStyle" style="height:100%">
    	<el-tree
    		ref="tree"
    		default-expand-all
    		highlight-current
    		:data="treeData"
    		node-key="id"
    		:props="defaultProps"
    		style="height:99%">
    	</el-tree>
    </div>

data() { 
    	return { 
    		treeData: [],
    		// 设置props
    		defaultProps: { 
    			// 你接口返回的字节点名称
    			children: "children",
    			// 名称
    			label: "label"
    		},
    	}
    }

// 获取tree数据 方法可在生命周期函数中执行
    loadTreeData() { 
    	let data = { deta: '数据'};
    	this.axios.post('接口地址', this.$qs.stringify(data)).then(res => { 
    		this.treeData = res.data;
    	});
    	if (this.treeData.length > 0) { 
    			this.$nextTick(() => { 
    			// 通过 keys 设置默认勾选的节点，使用此方法必须设置 node-key属性，若没有节点被选中则返回 null
    			this.$refs.tree.setCurrentKey(this.treeData[0].id);
    			this.mainPrjName = this.treeData[0].text
    		})
    	}
    },

换肤代码

<style lang="less" scoped>
    	// .treeStyle 就是tree父级class
        /deep/ .treeStyle{ 
            .el-tree > .el-tree-node > .el-tree-node__content:first-child { 
                &::before,
                &::after { 
                    border: none;
                }
            }
            .el-tree { 
                border: 1px solid #e6e6e6 !important;
            }
    
            .el-tree-node__content { 
                border-bottom: 1px solid #e6e6e6;
                border-left: 1px solid #e6e6e6;
            }
    
            .el-tree-node .el-tree-node__content .el-tree-node__label { 
                overflow: hidden;
                text-overflow: ellipsis;
            }
    
            .el-tree-node .el-tree-node__content { 
                height: 30px;
    
                &::before,
                &::after { 
                    content: '';
                    position: absolute;
                    right: auto;
                }
    
                &::before { 
                    border-left: 2px solid #e6e6e6;
                    bottom: 50px;
                    height: 100%;
                    top: 0;
                    width: 1px;
                    margin-left: -5px;
                    margin-top: -15px;
                }
    
                &::after { 
                    border-top: 2px solid #e6e6e6;
                    height: 20px;
                    top: 14px;
                    width: 10px;
                    margin-left: -5px;
                }
            }
            .el-tree .el-tree-node { 
                position: relative;
            }
        }
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+element实现动态换肤功能

有时候一个项目的主题并不能满足所有人的审美，这时候换肤功能就很友好，本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template

约定不等于承诺〃/ 2023年02月24日 03:47/ 0 赞/ 27 阅读

相关 Element 树组件使用及换肤 - 同步

Tree // 基础布局 <div class="treeStyle" style="height:100%"> <el-tree re

￡神魔★判官ぃ/ 2022年12月07日 15:19/ 0 赞/ 149 阅读

相关 java web换肤_原生JavaScript实现换肤

原生JavaScript实现换肤的具体代码，供大家参考，具体内容如下原理通过点击事件，获取点击的的图片的信息，在HTML背景图片的路径改变 css样式 body\{

柔光的暖阳◎/ 2022年11月06日 10:50/ 0 赞/ 243 阅读

相关 vue less 换肤

> 配置几套主题色，通过修改body class来实现，由于我是在组件库中使用的，以下为核心代码 switch-theme 子组件 <template>

川长思鸟来/ 2022年10月20日 13:51/ 0 赞/ 214 阅读

相关 Winform换肤原理

前两天跟着做村级节水系统，在其中遇到了换肤功能的实现。所以，想具体了解一下换肤原理。跟踪代码，Winform换肤的实现主要是读取换肤的配置文件，然后重绘所有所有窗体

淩亂°似流年/ 2022年09月20日 15:26/ 0 赞/ 301 阅读

相关 vue+ element 动态换肤

转至 [https://www.cnblogs.com/dengqichang/p/10364455.html][https_www.cnblogs.com_dengqicha

た入场券/ 2021年12月22日 10:47/ 0 赞/ 471 阅读

相关 Element 换肤方案的探索

项目中如果需要换肤，黑白配的话还好说，就两种皮肤，稍微整整就好了，这次直接来了8套皮肤，这就有点渗人了，必须想办法偷偷懒了，开发环境也要好好琢磨一下了。 Element 有提

墨蓝/ 2021年12月21日 03:43/ 0 赞/ 289 阅读

相关基于Vue、Element的换肤

基于Vue、Element的换肤写在前面方案一使用全局的样式覆盖（前端通用）方案二自定义自己的Element-ui配色

ゝ一世哀愁。/ 2021年11月16日 16:10/ 0 赞/ 481 阅读

相关基于Vue、Element的换肤

基于Vue、Element的换肤写在前面方案一使用全局的样式覆盖（前端通用）方案二自定义自己的Element-ui配色

墨蓝/ 2021年11月16日 10:44/ 0 赞/ 492 阅读

相关 Jquery换肤效果

Jquery换肤效果简介：自从Web2.0开始流行后，很多网站更加注重用户自定义，例如在网页上用户自定义新闻内容，可以任意拖动网页内容，也可以给网页选择一套自己喜

偏执的太偏执、/ 2021年09月17日 01:24/ 0 赞/ 452 阅读