效果图
html代码
<el-tree
class="tree-line"
:data="filteredTreeData"
:props="{
children: 'children',
label: 'projectName',
}"
node-key="id"
>
<span class="custom-tree-node" :title="node.label" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
</span>
</el-tree>
css代码
.tree-line {
.custom-tree-node {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
::v-deep .el-tree-node {
position: relative;
// padding-left: 16px; // 缩进量
}
::v-deep .el-tree-node__children {
padding-left: 16px; // 缩进量
}
::v-deep .el-tree-node__content .is-leaf {
display: none;
}
// 竖线
::v-deep .el-tree-node::before {
content: '';
height: 100%;
width: 1px;
position: absolute;
left: -3px;
top: -26px;
border-width: 1px;
border-left: 1px dashed #7c7c7c;
}
// 当前层最后⼀个节点的竖线⾼度固定
::v-deep .el-tree-node:last-child::before {
height: 38px; // 可以⾃⼰调节到合适数值
}
// 横线
::v-deep .el-tree-node::after {
content: '';
width: 24px;
height: 20px;
position: absolute;
left: -3px;
top: 12px;
border-width: 1px;
border-top: 1px dashed #7c7c7c;
}
// 去掉最顶层的虚线,放最下⾯样式才不会被上⾯的覆盖了
& > ::v-deep .el-tree-node::after {
border-top: none;
}
& > ::v-deep .el-tree-node::before {
border-left: none;
}
// 展开关闭的icon
::v-deep .el-tree-node__expand-icon {
font-size: 16px;
color: rgba(0, 0, 0, 0.65);
// 叶⼦节点(⽆⼦节点)
::v-deep &.is-leaf {
color: transparent;
// display: none; // 也可以去掉
}
}
}
还有一种方法,这个只有文本溢出
.tree-line {
:deep(.el-tree-node__content) {
width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
box-sizing: border-box;
}
}