1.<el-card>生成带图片、内容、操作按钮的卡片。 2.循环的时候,一行固定五个,最多只有两行共10条数据。 3.设置好相隔宽度,自动适应屏幕,先用死数据。 4.最后在底部,生成elementUI的分页 5.框架为vue2脚手架使用
时间: 2024-03-08 15:45:04 浏览: 37
好的,根据您的要求,我来帮您编写一个Vue2的代码示例,实现您所需的功能。
首先,您可以使用Element UI的卡片组件`<el-card>`来展示您的数据。在卡片中,您可以设置卡片的图片、标题、描述、操作按钮等内容。以下是一个简单的示例代码:
```html
<template>
<div>
<el-row :gutter="20">
<el-col v-for="(item, index) in items" :key="index" :span="5">
<el-card :body-style="{ padding: '20px' }">
<img :src="item.image" class="image">
<div class="text">
<span class="title">{{ item.title }}</span>
<p class="description">{{ item.description }}</p>
</div>
<div class="actions">
<el-button type="primary" size="small">操作</el-button>
</div>
</el-card>
</el-col>
</el-row>
<el-pagination
:total="total"
:page-size="pageSize"
:current-page="currentPage"
@current-change="handlePageChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
title: '标题1',
description: '描述1',
image: 'https://picsum.photos/200/200'
},
// 其他数据...
],
total: 10,
pageSize: 5,
currentPage: 1
}
},
methods: {
handlePageChange(newPage) {
// 调用API获取对应页数的数据
// 更新items数据
// ...
}
}
}
</script>
<style scoped>
.image {
width: 100%;
height: 200px;
object-fit: cover;
}
.title {
font-size: 18px;
font-weight: bold;
}
.description {
margin-top: 10px;
font-size: 14px;
color: #666;
}
.actions {
margin-top: 20px;
text-align: right;
}
</style>
```
上述代码中,我们使用了`<el-row>`和`<el-col>`来实现每行固定五个卡片的布局,使用了`<el-pagination>`来实现分页功能。在`<el-card>`中,我们使用了图片、标题、描述和操作按钮等内容来展示数据。
当用户点击分页按钮时,我们可以通过调用API获取对应页数的数据,并更新`items`数据。同时,`<el-card>`的布局会自动适应屏幕大小,因此您无需进行额外的设置。
希望以上代码能够满足您的需求!