<template lang="">
       <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            v-model:page-sizes="pageSizes"
            :disabled="disabled"
            :background="background"
            layout="total,prev, pager, next,sizes"
            v-model:total="total" :pager-count="pagerCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
</template>
<script setup>
import { ref } from 'vue'
//分页
  const currentPage = ref(1)
  const pageSizes = [10, 20, 30, 40];
  const pageSize = ref(10)
  const total = ref(100)
  const disabled = ref(false);
  const background = ref(true)
  const pagerCount = ref(6)
  const emit = defineEmits(['update:currentPage', 'update:pageSize']);

  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    emit('update:pageSize', val);
    pageSize.value=val
  }
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    emit('update:currentPage', val);
    currentPage.value=val
  }

</script>
<style lang="scss" scoped>
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger) {
  width: 105px;
}
:deep(.el-pagination.is-background .el-pager li.is-active){
  color: #409eff!important;
    border: 1px solid #409eff!important;
}
:deep(.el-pagination.is-background .el-pager li){
  background-color: none!important;
  font-weight: normal!important;
}
:deep(.el-pagination__total){
  color: #333;
}

</style>
