如何在页面上使两个el-descriptions连接起来
时间: 2024-03-19 14:45:49 浏览: 65
要在页面上使两个 `<el-descriptions>` 连接起来,可以设置它们的 `border` 属性为 `false`,然后在第一个 `<el-descriptions>` 的最后一个 `<el-descriptions-item>` 元素上添加 `class`属性,比如 `connect-line`,然后在 CSS 中添加以下样式:
```
.el-descriptions.connect-line .el-descriptions__item:last-child {
border-bottom: none;
}
.el-descriptions.connect-line .el-descriptions__item:last-child .el-descriptions__content {
padding-bottom: 0;
}
.el-descriptions.connect-line .el-descriptions__item:last-child .el-descriptions__content::before {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
width: 1px;
height: 10px;
background-color: #ebeef5;
transform: translateX(-50%);
}
```
这样就可以在第一个 `<el-descriptions>` 的最后一个 `<el-descriptions-item>` 元素和第二个 `<el-descriptions>` 的第一个 `<el-descriptions-item>` 元素之间添加一条连接线了。
阅读全文