vue项目实现分页效果

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

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