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

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>