1.<el-card>生成带图片、内容、操作按钮的卡片。 2.循环的时候,一行固定五个,最多只有两行共10条数据。 3.设置好相隔宽度,自动适应屏幕,先用死数据给我所有数据。 4.最后在底部,生成elementUI的分页,包括总条数和跳转指定页 5.框架为vue2脚手架使用
时间: 2024-03-08 18:44:57 浏览: 18
好的,以下是一个实现你要求的完整示例代码:
```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
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
layout="total, prev, pager, next, jumper"
@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;
// TODO: 根据当前页码从后端获取数据
},
},
};
</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` 事件中处理页码变化的逻辑。注意,这个示例中我们使用了 `sync` 修饰符来实现双向绑定,以便在页码变化时更新 `currentPage` 的值。
另外,这个示例中的数据是死数据,如果你要从后端获取数据,你需要在适当的时机调用后端接口来获取数据,并将数据渲染到页面上。在 `handlePageChange` 方法中,你需要根据当前页码从后端获取对应的数据,并更新 `items` 数组和 `total` 属性。此外,如果你需要自定义分页控件的样式和布局,你可以使用 `slot` 来自定义分页控件的各个部分。