element中的横线_vue中elementUI的tree组件的使用（加线条加自定义图标）

后台管理系统是从layui过来的，所以总是觉得elementUI的tree组件线条没了不好看，

第一中效果有线条

image.png

html

要在tree组件的直系父集上面加class名字tree-container，在自己加tree的class

ref="tree"

class="tree filter-tree"

:data="data"

:props="defaultProps"

:filter-node-method="filterNode"

default-expand-all

>

{ { node.label }}

css样式

/* 树形结构节点添加连线 */

.tree .el-tree-node {

position: relative;

// padding-left: 16px;

}

.tree .el-tree-node__children {

padding-left: 16px;

}

.tree .el-tree-node :last-child:before {

height: 38px;

}

.tree .el-tree > .el-tree-node:before {

border-left: none;

}

.tree-container .el-tree > .el-tree-node:after {

border-top: none;

}

.tree .el-tree-node__children .el-tree-node:before {

content: '';

left: -4px;

position: absolute;

right: auto;

border-width: 1px;

}

.tree .el-tree-node:after {

content: '';

left: -4px;

position: absolute;

right: auto;

bord