待到芦花摇曳时，再倚西窗闻雁鸣，日落西山江上行，思缱绻，清月冷，风也寄情。光影斑驳，时光掠过，心于光阴的门楣，寂静欢喜。一纸素文，一缕清风，写意了心中的世界，终有一人的身影站立在风中于梦中，风去，影渐消。水潺潺，风声声，心低喃细语。 "
vue项目中实现分页效果，供大家参考，具体内容如下
1.这里我们使用element-ui来实现，先使用npm安装
npm i element-ui -S
2.在main.js中全局引入
import ElementUI from "element-ui" import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) //将element-ui挂在到全局
3.封装组件
<template>
<div class="block">
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="6"
layout="prev, pager, next, jumper"
:total="total"
:pager-count="5"
>
</el-pagination>
</div>
</template>
<script>
export default {
props: ["num", "page"], //传入的总条数，和页码
data() {
return {};
},
computed: {
currentPage: function() {
return this.page;
},
total: function() {
return this.num;
}
},
methods: {
handleSizeChange(val) {
this.$emit("size-change", val);
},
handleCurrentChange(val) {
this.$emit("current-change", val);
}
}
};
</script>
<style>
.block {
text-align: right;
/* width: 100%; */
}
</style>
4.引入组件并使用
<template>
<div class="mobild">
<div>
<ATablePaging
:num="num"
:page="page"
@current-change="(val) => {
page = val;
list();
}"
></ATablePaging>
</div>
</div>
</template>
<script>
import ATablePaging from "../paging"; //引入分页组件
export default {
data() {
return {
page:"", //当前页码
num: 1, //内容总条数
};
},
methods: {
list() {
//发送的http请求
//后端返回的总页数等于num
},
},
mounted() {
this.news();
},
components: {
ATablePaging
}
};
</script>
<style scoped>
</style>
关于vue.js的学习好代码教程，请大家点击专题vue.js组件学习好代码教程、Vue.js前端组件学习好代码教程进行学习。
到此这篇关于vue项目如何实现分页效果就介绍到这了。信对了人，是快乐，是欣慰，是骄傲，是无言的幸福；信错了人，是悲伤，是愤怒，是委屈，甚至致命。更多相关vue项目如何实现分页效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
