ant-design-vue中的分页组件自定义

实现效果

实现代码

需要自己创建一个分页组件的代码然后导入进去。

 

<template><div style="display: flex; justify-content: space-between; margin-bottom: 10px"><div><a-select v-model:value="pageSize" @change="sizeChange" style="width: 130px"><a-select-option v-for="item in sizeOptions" :value="item.value">{{item.label}}</a-select-option></a-select><span v-if="props.total != null" class="cus-total">共<span class="cus-total-text">{{total}}</span>条</span></div><div><a-pagination:total="total"v-model:page-size="pageSize"show-less-items@change="currentChange"/></div></div>
</template><script setup lang="ts">
import {ref, defineProps, onMounted, defineEmits} from 'vue'
interface Props {total: anypageSize: anycurrent: any// jumper: any
}
const props = defineProps<Props>()
const currentPageSize = ref<any>(0)const sizeOptions = ref<any>([{label: '10条/页', value: 10},{label: '20条/页', value: 20},{label: '50条/页', value: 50},{label: '100条/页', value: 100},
])// 页码切换
function currentChange(page: number) {// console.log(page)pageChangeEmit(page, props.pageSize)
}
// 大小切换
function sizeChange(size: number) {// console.log(size)pageChangeEmit(props.current, size)
}// 传值
const emit = defineEmits(["pageChange"])
function pageChangeEmit(current: any, pageSize: any) {emit("pageChange", {current: current,pageSize: pageSize})
}
</script><style scoped>
.cus-total {margin-left: 10px;color: #434C6A;
}
.cus-total-text {margin: 0 5px
}
::v-deep .ant-pagination > .ant-pagination-item-active  a {background-color: #0066FF !important;color: #ffffff !important;
}::v-deep .ant-pagination > .ant-pagination-item  {background-color: #ffffff;font-weight: 500;
}
</style>