<template>
<div class="list-content">
<div class="list">
<!-- 遍历视频 -->
<router-link
:key="item.id"
:to="{ path: '/coursedetail', query: { video_id: item.id } }"
class="course"
v-for="item in showTableData"
>
<div class="item_img">
<img :src="item.cover_img" />
</div>
<div class="video_info">
<div class="c_title">{{ item.title }}</div>
<div class="price">¥ {{ item.price / 100 }}</div>
</div>
</router-link>
<div class="pageStyle">
<el-pagination
background
@current-change="handleCurrentChange"
layout="prev, pager, next"
:page-size="numberPerPage"
:total="total"
margin-top="100px"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import { getVideoList } from "@/api/getData.js";
export default {
props: {
videoList: {
type: Array,
required: true,
},
},
methods: {
async getVideoList() {
const result = await getVideoList();
console.log(result);
this.showTableData = result.data.data.slice(0, this.numberPerPage);
this.total = result.data.data.length;
},
handleCurrentChange(currentindex) {
// console.log(currentindex);
this.showTableData = this.videoList.slice(
(currentindex - 1) * this.numberPerPage,
currentindex * this.numberPerPage
);
console.log(this.showTableData);
},
created() {
this.showTableData = this.videoList.slice(0, 6);
},
},
mounted() {
this.getVideoList();
this.handleCurrentChange();
},
data() {
return {
total: 0,
showTableData: [],
numberPerPage: 6, //希望每页展示的数据个数
};
},
};
</script>
vue实现分页功能
于 2023-10-10 21:51:24 首次发布