el-descriptions等分
时间: 2024-01-13 10:53:47 浏览: 23
"el" 是 "element" 的缩写,"descriptions" 则是 "描述" 的意思。因此,"el-descriptions" 可以理解为将一个元素分成若干个描述块的过程。在前端开发中,通常使用 "el-descriptions" 来展示表单或页面中某个元素的详细信息。例如,一个个人资料页面中,可能需要展示用户的姓名、性别、出生日期、地址等信息,这些信息可以通过 "el-descriptions" 来进行分块展示,方便用户快速浏览和查看。
相关问题
如何使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-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 {
padding-bottom: 0;
}
```
这个样式会将除了最后一个 `el-descriptions` 以外的所有 `el-descriptions` 的最后一个 `<el-descriptions-item>` 元素的 `padding-bottom` 设置为 0,从而消除空白。需要注意的是,你需要为每个 `el-descriptions` 都添加这个样式,除了最后一个 `el-descriptions`。
相关推荐
![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)