vue 基于element-ui 分页组件封装的实例代码

<template>
 <el-pagination @size-change=\"handleSizeChange\" @current-change=\"handleCurrentChange\" :page-sizes=\"[10, 20, 30, 40]\" :page-size=\"pageSize\" layout=\"total, sizes, prev, pager, next, jumper\" :total=\"total\" style=\"float:right;\">
 </el-pagination>
</template>
<  type=\"text/ecma -6\">
export default {
 components: {
 },
 data() {
  return {
  }
 },
 props: {
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 1
  }
 },
 watch: {
 },
 methods: {
  //每页展示条数
  handleSizeChange(val) {
   //事件传递
   this.$emit(\'handleSizeChangeSub\', val);
  },
  //当前页
  handleCurrentChange(val) {
   //事件传递
   this.$emit(\'handleCurrentChangeSub\', val);
  }
 },
 // 过滤器设计目的就是用于简单的文本转换
 filters: {},
 // 若要实现更复杂的数据变换，你应该使用计算属性
 computed: {
 },
 created() {
 },
 mounted() {},
 destroyed() {}
}
</ >
<style lang=\"scss\" type=\"text/css\" scoped>
</style>

// 分页
import pages from \'components/common/pages/pages\'
components: {
　　pages
 },
<pages :total=\"total\" :page-size=\"pageSize\" @handleSizeChangeSub=\"handleSizeChangeFun\" @handleCurrentChangeSub=\"handleCurrentChangeFun\"></pages>
handleSizeChangeFun(v) {
　　this.pageSize = v;
　　this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
 　　this.pageNum = v; //当前页
 　　this._enterpriseList(); //更新列表
}

<template> <div class=\"block\"> 
<el-pagination
  @size-change=\"handleSizeChange\"
  @current-change=\"handleCurrentChange\"
  :current-page=\"currentPage\"
  :page-sizes=\"[100, 200, 300, 400]\"//这事下拉框可以选择的，选择一夜显示几条数据
  :page-size=\"100\" //这是当前煤业显示的条数
  layout=\"total, sizes, prev, pager, next, jumper\"
  :total=\"400\" //这个是总共有多少条数据，把后台获取到的数据总数复制给total就可以了
>
 </el-pagination>
 </div>
</template>
< >
 export default {
 methods: {
  handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  }
 },
 data() {
  return {
  total:\'0\',
  currentPage: 4
  };
 }
 }
</ >

<div style=\"float:right;margin-top:20px;\">
  <el-pagination
   @size-change=\"handleSizeChange\"
   @current-change=\"handleCurrentChange\"
   :current-page=\"currentPage4\"
   :page-sizes=\"[5, 10, 20, 30]\"
   :page-size=\"pageSize\"  //写代码时忘记把pageSize赋值给:page-size了，
 　　　　　　layout=\"total, sizes, prev, pager, next, jumper\" 
　　　　　　:total=\"totalCount\"> 
　　　　</el-pagination>
</div>