vue 使用 el-descriptions 有些一行三个 有些一行一个
时间: 2024-01-13 12:23:53 浏览: 133
可以通过设置 `:column` 属性来控制 `el-descriptions` 每行显示的列数,例如设置为 `3` 就是每行显示三个,设置为 `1` 就是每行只显示一个。默认值为 `1`。
如果需要在同一个页面中同时使用一行三个和一行一个的 `el-descriptions`,可以在它们的父容器中设置不同的宽度,例如:
```html
<div class="container">
<el-descriptions :column="3" :items="items1"></el-descriptions>
</div>
<div class="container">
<el-descriptions :column="1" :items="items2"></el-descriptions>
</div>
```
```css
.container {
width: 80%; /* 一行三个的宽度 */
margin: 0 auto;
margin-bottom: 20px;
}
.container:last-child {
width: 100%; /* 一行一个的宽度 */
}
```
这样第一个 `el-descriptions` 就会显示为一行三个,而第二个 `el-descriptions` 则会显示为一行一个。你可以根据自己的需要调整容器的宽度和样式。
相关问题
vue 使用 el-descriptions 一行三个重复多行
你可以通过使用 `el-row` 和 `el-col` 栅格布局组件,将 `el-descriptions` 放在 `el-col` 中,再将多个 `el-col` 放在同一个 `el-row` 中,从而实现一行显示多个 `el-descriptions`,并重复多行的效果。具体代码如下:
```html
<template>
<div>
<el-row>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'张三'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="18"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'李四'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="20"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'王五'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="22"></el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'赵六'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="25"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'钱七'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'男'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="28"></el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :span="8"><el-descriptions :title="'用户信息'" :bordered="true" :column="1" :size="'small'">
<el-descriptions-item :label="'姓名'" :content="'孙八'"></el-descriptions-item>
<el-descriptions-item :label="'性别'" :content="'女'"></el-descriptions-item>
<el-descriptions-item :label="'年龄'" :content="30"></el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</div>
</template>
```
在上述代码中,我们使用 `el-row` 和 `el-col` 组件将 `el-descriptions` 组件进行布局,通过设置 `:span` 属性控制每个 `el-col` 的宽度,从而实现一行显示多个 `el-descriptions` 的效果。同时,我们在每个 `el-descriptions` 组件中设置了不同的数据,以达到重复多行的效果。
vue 使用 el-descriptions v-for 示例 一行三个
好的,下面是一个使用`el-descriptions`和`v-for`实现一行三个的示例代码:
```html
<el-descriptions :column="3">
<el-descriptions-item v-for="(item, index) in itemList" :key="index" :label="item.label" :span="1">
{{ item.value }}
</el-descriptions-item>
</el-descriptions>
```
在上面的代码中,我们使用了`el-descriptions`组件来显示一组属性列表。`column`属性设置为3,表示每行显示3个属性。然后,我们使用`v-for`指令遍历`itemList`数组中的每个元素,并使用`el-descriptions-item`组件来显示每个属性的标签和值。`span`属性设置为1,表示每个属性占据一列的宽度。
希望这个示例可以帮助你解决问题!如有其他问题,欢迎继续提问。