el-descriptions想在它后面加一个字段怎么添加
时间: 2024-01-13 18:26:43 浏览: 34
要在el-descriptions后面添加一个字段,你需要在el-descriptions标签内添加一个新的el-descriptions-item标签,同时设置它的属性label为新字段的名称,value为新字段的值。例如:
```html
<el-descriptions>
<el-descriptions-item label="字段1" value="值1"></el-descriptions-item>
<el-descriptions-item label="字段2" value="值2"></el-descriptions-item>
<el-descriptions-item label="新字段" value="新值"></el-descriptions-item>
</el-descriptions>
```
这样就在el-descriptions后面添加了一个新的字段,名称为“新字段”,值为“新值”。
相关问题
怎么在el-descriptions的title右边加一个el-button,请给出代码
可以使用 `el-descriptions` 的 `slot` 来实现在 `title` 右边加一个 `el-button`。具体代码如下:
```html
<el-descriptions :column="1">
<el-descriptions-item label="Label" :span="24">
<template v-slot:title>
<span>My Title</span>
<el-button type="text" icon="el-icon-plus"></el-button>
</template>
Description
</el-descriptions-item>
</el-descriptions>
```
在 `title` 中使用了 `template` 标签来自定义 `title`,并在其中放置了一个普通的文本 `span` 和一个 `el-button`。需要注意的是,为了让 `title` 和 `description` 在同一行显示,需要设置 `el-descriptions-item` 的 `:span` 属性为 `24`。
这样就可以在 `el-descriptions` 的 `title` 右边加一个 `el-button` 了。
如何使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`。
相关推荐
![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)