如何在页面上使两个el-descriptions连接起来
时间: 2024-03-19 21:45:23 浏览: 15
要在页面上使两个 `el-descriptions` 组件连接起来,可以将它们放在同一个父元素内,并设置该父元素的样式为 `display: flex;` 和 `flex-wrap: wrap;`,这样它们就可以根据父元素的宽度自动换行,同时形成一个连续的描述列表。具体的代码示例如下:
```html
<div style="display: flex; flex-wrap: wrap;">
<el-descriptions size="small" title="描述列表1">
<!-- 描述列表1 的内容 -->
</el-descriptions>
<el-descriptions size="small" title="描述列表2">
<!-- 描述列表2 的内容 -->
</el-descriptions>
</div>
```
注意,在以上示例中,`el-descriptions` 组件最好设置一个固定的宽度或者使用 `flex` 属性,以便在父元素宽度不够时自动缩放到合适的大小。
相关问题
如何使el-descriptions中的最后一个<el-descriptions-item> 元素和第二个 <el-descriptions> 的第一个 <el-descriptions-item> 元素连接起来
要使 `el-descriptions` 中的最后一个 `<el-descriptions-item>` 元素和第二个 `<el-descriptions>` 的第一个 `<el-descriptions-item>` 元素连接起来,可以使用以下 CSS 样式:
```
.el-descriptions:not(:last-child) .el-descriptions__item:last-child .el-descriptions__content::after {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
width: 1px;
height: 10px;
background-color: #ebeef5;
transform: translateX(-50%);
}
```
这个样式会在除了最后一个 `el-descriptions` 以外的所有 `el-descriptions` 的最后一个 `<el-descriptions-item>` 元素上添加一个连接线,连接到下一个 `el-descriptions` 的第一个 `<el-descriptions-item>` 元素。需要注意的是,你需要为每个 `el-descriptions` 都添加这个样式,除了最后一个 `el-descriptions`。
如何去掉两个el-descriptions间的空白间隙
如果您正在使用el-descriptions组件,可以通过设置`size`属性为`small`来去掉两个el-descriptions之间的空白间隙。例如:
```
<el-descriptions size="small">
<el-descriptions-item label="姓名" value="张三"></el-descriptions-item>
<el-descriptions-item label="性别" value="男"></el-descriptions-item>
</el-descriptions>
```
如果您想要自定义间隔大小,可以使用CSS样式来调整:
```
.el-descriptions {
margin-bottom: 0;
}
.el-descriptions__item {
margin-bottom: 8px;
}
```
其中,`.el-descriptions`是整个组件的样式类,`.el-descriptions__item`是每个item的样式类,您可以根据自己的需要来调整间隔大小。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)