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>
