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; }</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前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。