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

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

    },
    methods: {
      sizeChange  (val) {
        this.$emit('update:pageSize', val);
        this.$emit('query'); //触发自定义查询事件
      },
      currentChange (val) {
        this.$emit('update:currPage', val);
        this.$emit('query');
      },
    },
    props:{
      currPage: {
        type: Number,
        default: 1,
        required: true
      },
      pageSize: {
        type: Number,
        default: 10,
        required: true
      },
      total: {
        type: Number,
        default: 0,
        required: true
      },
      pageOptions: {
        type: Array,
        default: ()=>[10, 20, 30],
        required: true
      },

    },
    watch:{
    },
    data () {
      return {
      };
    },
}
</script>

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

</style>
