element中的横线_element-ui tree添加提示线

记录一下 element-ui中 el-tree添加提示线问题

1.页面渲染

2.写样式

.mytree /deep/{

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

border-top: none;

}

.el-tree-node {

position: relative;

padding-left: 16px;

}

//节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉

.el-tree-node__expand-icon.is-leaf{

display: none;

}

.el-tree-node__children {

padding-left: 16px;

}

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

height: 38px;

}

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

border-left: none;

}

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

border-top: none;

}

.el-tree-node:before {

content: "";

left: -4px;

position: absolute;

right: auto;

border-width: 1px;

}

.el-tree-node:after {

content: "";

left: -4px;

position: absolute;

right: auto;

border-width: 1px;

}

.el-tree-node:before {

border-left: 1px dashed #4386c6;

bottom: 0px;

height: 100%;

top: -26px;

width: 1px;

}

.el-tree-node:after {

border-top: 1px dashed #4386c6;

height: 20px;

top: 12px;

width: 24px;

}

}

三.页面展示

感谢:这篇博客element-ui tree添加提示线​blog.csdn.net