引入<el-descriptions>控制台没有报错,el-descriptions__body类下是空的
时间: 2024-01-13 16:40:24 浏览: 32
如果`el-descriptions__body`下没有内容,可能是以下原因之一:
1. 没有设置`el-descriptions`的`label`和`content`属性,导致没有内容显示在`el-descriptions__body`中。请检查您的代码是否正确设置了这些属性。
2. 设置了`el-descriptions`的`label`和`content`属性,但是没有在这些属性中传递任何值。请检查您的代码是否正确设置了这些属性并传递了正确的值。
3. 可能是CSS样式的问题。请检查您的CSS是否正确设置了`el-descriptions`和`el-descriptions__body`的样式,以确保它们能够正确显示内容。
如果以上方法均未解决问题,请提供更多代码和细节,以便我更好地理解问题并提供更好的解决方案。
相关问题
在<el-descriptions>组件中使用<el-row>和<el-col>后页面空白
在`<el-descriptions>`组件中使用`<el-row>`和`<el-col>`是没有必要的,因为`<el-descriptions>`已经内置了栅格系统。如果您在`<el-descriptions>`内部使用`<el-row>`和`<el-col>`,可能会导致布局混乱和页面空白。
如果您需要自定义`<el-descriptions>`中的布局,可以使用`label-width`和`content-width`属性来控制标签和内容的宽度,或者使用`slot`来自定义标签和内容的渲染方式。
以下是一个示例,展示如何使用`<el-descriptions>`自定义布局:
```html
<el-descriptions :label-width="100px" :content-width="200px">
<el-descriptions-item label="姓名">张三</el-descriptions-item>
<el-descriptions-item label="年龄">18</el-descriptions-item>
<el-descriptions-item label="地址">
<el-row>
<el-col :span="12">北京市</el-col>
<el-col :span="12">海淀区</el-col>
</el-row>
</el-descriptions-item>
</el-descriptions>
```
在上面的示例中,我们使用`<el-row>`和`<el-col>`来布局地址信息,同时使用`label-width`和`content-width`属性来控制标签和内容的宽度。注意,在`<el-descriptions>`组件中使用`<el-row>`和`<el-col>`时,需要将其作为`<el-descriptions-item>`的内容来使用。
如何使第一个 <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`。