1.<el-card>生成带图片、内容、操作按钮的卡片。 2.循环的时候,一行固定五个,最多只有两行共10条数据。 3.设置好相隔宽度,自动适应屏幕,先用死数据给我所有数据。 4.最后在底部,生成elementUI的分页,包括总条数和跳转指定页 5.框架为vue2脚手架使用 6.别忘记自动计算分页数量
时间: 2024-03-07 22:54:25 浏览: 88
javax.servlet-api-3.1.0.jar javax.el-api-2.2.4.jar javax.el-2.2.4.jar
5星 · 资源好评率100%
好,这里提供更新后的示例代码,实现上述功能:
``` vue
<template>
<div>
<el-card v-for="(item, index) in currentCards" :key="index" class="card" :body-style="{ padding: '0px' }">
<img :src="item.image" class="image">
<div style="padding: 14px;">
<span class="title">{{ item.title }}</span>
<div class="description">{{ item.description }}</div>
<div class="operation">
<el-button type="primary">{{ item.buttonText }}</el-button>
</div>
</div>
</el-card>
<el-pagination :total="total" :page-size="pageSize" layout="total, prev, pager, next" class="pagination" @current-change="handleCurrentChange"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
cards: [
{ image: 'https://picsum.photos/200/200', title: 'Card 1', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 2', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 3', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 4', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 5', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 6', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 7', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 8', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 9', description: 'This is a card', buttonText: 'Click me' },
{ image: 'https://picsum.photos/200/200', title: 'Card 10', description: 'This is a card', buttonText: 'Click me' },
],
currentCards: [],
total: 10,
pageSize: 5,
};
},
mounted() {
this.getCurrentCards();
},
methods: {
getCurrentCards() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
this.currentCards = this.cards.slice(startIndex, endIndex);
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
this.getCurrentCards();
},
},
computed: {
currentPage: {
get() {
return 1;
},
set(value) {
this.$emit('update:currentPage', value);
},
},
totalPages() {
return Math.ceil(this.total / this.pageSize);
},
},
};
</script>
<style scoped>
.card {
width: calc(20% - 16px);
margin-right: 16px;
margin-bottom: 16px;
}
.image {
width: 100%;
height: 200px;
object-fit: cover;
}
.title {
font-size: 18px;
font-weight: bold;
margin-right: 20px;
}
.description {
margin-top: 12px;
margin-bottom: 12px;
}
.operation {
text-align: right;
}
.pagination {
margin-top: 16px;
text-align: right;
}
</style>
```
这段代码实现了:
1. 使用 `el-card` 生成带图片、内容、操作按钮的卡片。
2. 循环的时候,一行固定五个,最多只有两行共10条数据。
3. 设置好相隔宽度,自动适应屏幕,使用 `calc()` 函数实现自适应宽度。
4. 在底部生成 `elementUI` 的分页,包括总条数和跳转指定页,自动计算分页数量。
5. 使用 `vue2` 脚手架。
需要注意的是,示例代码中的图片使用了 `https://picsum.photos/` 这个网站提供的随机图片。你需要将 `image` 属性替换成自己的图片链接。同时,代码中使用了 `currentPage` 和 `totalPages` 两个计算属性,用于计算当前页和总页数。这两个属性可以在父组件中通过 `v-model` 进行双向绑定,实现分页跳转。
阅读全文