1.<el-card>生成带图片、内容、操作按钮的卡片。 2.循环的时候,一行固定五个,最多只有两行共10条数据。 3.设置好相隔宽度,自动适应屏幕,先用死数据给我所有数据。 4.最后在底部,生成elementUI的分页 5.框架为vue2脚手架使用
时间: 2024-03-08 13:45:02 浏览: 126
javax.servlet-api-3.1.0.jar javax.el-api-2.2.4.jar javax.el-2.2.4.jar
5星 · 资源好评率100%
好的,以下是一个实现你要求的基本示例代码:
```html
<template>
<div>
<el-card v-for="(item, index) in items" :key="index" class="card" :style="{ marginLeft: index % 5 !== 0 ? '20px' : '0' }">
<img :src="item.imgUrl" class="card-img">
<div class="card-body">
<div class="card-title">{{ item.title }}</div>
<div class="card-text">{{ item.content }}</div>
</div>
<div class="card-footer">
<el-button type="primary" size="small" @click="handleClick(item)">操作</el-button>
</div>
</el-card>
<div class="pagination">
<el-pagination
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
imgUrl: 'https://picsum.photos/id/11/200/300',
title: 'Card 1',
content: 'Content for card 1',
},
{
imgUrl: 'https://picsum.photos/id/12/200/300',
title: 'Card 2',
content: 'Content for card 2',
},
// ... 以下省略
],
currentPage: 1,
pageSize: 10,
total: 20,
};
},
methods: {
handleClick(item) {
console.log('Clicked:', item);
},
handlePageChange(page) {
console.log('Current page:', page);
this.currentPage = page;
},
},
};
</script>
<style scoped>
.card {
width: calc(20% - 20px);
margin-bottom: 20px;
display: inline-block;
vertical-align: top;
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.card-text {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
.card-footer {
text-align: right;
}
.pagination {
margin-top: 20px;
text-align: center;
}
</style>
```
这个示例中,我们使用 `v-for` 循环生成 `el-card` 组件,使用了 `calc()` 函数来计算卡片的宽度,以实现自动适应屏幕。为了让每行显示五个卡片,我们使用了 `display: inline-block` 和 `vertical-align: top` 属性来将卡片水平排列,并且使用了 `:style` 绑定来动态设置卡片的 `marginLeft` 样式,以在需要换行时设置正确的值。在底部,我们使用了 `el-pagination` 组件生成分页控件,并在 `@current-change` 事件中处理页码变化的逻辑。
注意,这个示例中的数据是死数据,如果你要从后端获取数据,你需要在适当的时机调用后端接口来获取数据,并将数据渲染到页面上。这个示例中的分页控件也只是简单的展示,如果你需要使用更复杂的分页功能,你需要根据具体的需求进行定制。
阅读全文