简单封装e...UI分页插件

简单封装e…UI分页插件

直接跳转到第2点，查看简单实现。

1、使用方式

<!-- 组件默认全局注册 -->
<jpagination ref="jpagination" :totalRow="totalRow" @getlist="getList"  />

export default{
    //初始化
    mounted(){
        this.classinfo = this.$route.query;
        if(this.classinfo.class_id){
            this.$refs.jpagination.initGetData({
                class_id:this.classinfo.class_id
            })
        }
    },
    data() {return {
        teacher_name: '', //搜索时的老师名字;
        tableData: [],    //列表
        totalRow:0,       //总条数;
    }},
    methods:{
        //触发搜索事件
        SearchHanlder(){
            this.$refs.jpagination.searchVal({
                teacher_name:this.teacher_name
            })
        },
        //获取数据列表
        async getList(params){
            //somecode...
        }
    }
}

export default{
    //特殊情况,
    //离开页面时候，to==classmember，保存数值
    //进入页面时候，from==classmember,读取数值
    beforeRouteLeave(to,from,next){
        if(to.name == 'classmember'){
            setPageNumber(this.$refs.jpagination.pageNumber);
        }
        next();
    },
    beforeRouteEnter(to,from,next){
        if(from.name != 'classmember'){
            clearPageNumber();
        }
        next();
    },
    //初始化
    mounted(){
        let pageNumber = getPageNumber(); //getPageNumber()为自定义方法,获取页码
        //如果有分页的情空下使用分页;
        if(pageNumber){
            this.$refs.jpagination.initGetData({
                teacher_name:''
            },pageNumber);
        }else{
            this.$refs.jpagination.initGetData({
                teacher_name:''
            });
        }
    },
}

2、源码实现

<template>
<div class="pagination">
  <el-pagination
    layout="total, sizes, prev, pager, next, jumper"
    :page-size="pageSize"
    :total="totalRow" 
    :current-page.sync="pageNumber"
    @size-change="sizeChange"
    @current-change="currentChange" 
  />
</div>
</template>

<script>
export default{
  props:{
    totalRow:{      //总条数;
      typeof:Number,
      default:0
    }
  },
  data(){return{
    pageSize:10,    //page-size;
    pageNumber:1,   //current-page;
    params:{}       //参数列表;
    // searchParams:{},//search params
    // metaParams:{},  //页面初始化需要的数据,每次获取列表都会携带这些参数;
  }},
  methods:{
    sizeChange(e){  //每页数量发生改变
      console.log(e);
      this.pageSize = e;
      this.getData()
    },
    currentChange(e){  //当前分页发生改变;
      console.log(e);
      this.pageNumber = parseInt(e);
      this.getData()
    },
    searchVal(e){ //搜索数据,对外接口;
      this.pageNumber = 1;
      Object.keys(e).forEach(key=>{
        this.params[key] = e[key]
      });
      this.getData();
    },
    //mounted:
    //this.$refs.jpagination.initGetData({})
    initGetData(params,pageNumber){  //首次调用,传入元参数,每次都会调用;
      this.params = params;
      if(pageNumber){
        // this.currentChange(pageNumber)
        this.pageNumber = parseInt(pageNumber);
      }
      this.getData();
    },
    getData(){            //无需参数,直接调用这个;
      this.$emit('getlist',{
        pageSize:this.pageSize,
        pageNumber:this.pageNumber,
        ...this.params
      })
    }
  }
}
</script>