vue 使用 el-descriptions 有些一行三个 有些一行一个
时间: 2024-01-13 17:23:53 浏览: 755
vue el-tree 默认展开第一个节点的实现代码
可以通过设置 `: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` 则会显示为一行一个。你可以根据自己的需要调整容器的宽度和样式。
阅读全文