<template>
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page=" pager.curPage"
      :page-sizes="pager.pageOptions"
      :page-size="pager.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.totals">
    </el-pagination>
</template>

<script>
export default {
    name: 'ls-pagination',
    created () {

    },
    mounted() {

    },
    methods: {
      sizeChange  (val) {
        this.pager.size = val;
        this.$emit('query'); //触发自定义查询事件
      },
      currentChange (val) {
        this.pager.curPage = val;
        this.$emit('query');
      },
    },
    props:{
      pager: { //分页参数，传递过来时，使用sync修饰
        type: Object,
        default: ()=>{
          return {
            curPage: 1,
            size: 10,
            pageOptions: [10, 20, 30],
            totals: 0
          }
        }
      },

    },
    watch:{
      pager: {
        handler: function(newVal, oldVal){
            this.$emit('update', this.pager);
        },
        deep: true
      }
    },
    data () {
        return {
        };
    },
}
</script>

<style type="text/css" scoped lang="scss">

</style>
