<el-card>卡片循环的时候,一行固定五个,设置好相隔宽度
时间: 2024-03-07 07:46:30 浏览: 233
您可以使用以下代码实现:
```html
<el-row>
<el-col v-for="item in list" :key="item.id" :span="5">
<el-card>
<!-- 卡片内容 -->
</el-card>
</el-col>
</el-row>
<style>
.el-row {
margin-left: -10px;
margin-right: -10px;
}
.el-col {
padding-left: 10px;
padding-right: 10px;
}
</style>
```
其中,`list`是一个数组,包含需要循环渲染的数据。`<el-row>`和`<el-col>`是Element UI的布局组件,用于实现网格布局。通过将`<el-col>`的`span`属性设置为5,可以让每个卡片占据一行中的五分之一。
为了让卡片之间有间隔,我们设置了一些样式。具体来说,我们通过设置`.el-row`的左右margin为-10px,来让每一行的卡片之间有10px的间隔。而通过设置`.el-col`的左右padding为10px,则可以让每个卡片内部的内容距离容器边缘有10px的距离。
阅读全文