vue3 分页组件的封装 el-pagination以及调用

本文主要是介绍vue3 分页组件的封装 el-pagination以及调用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图:

组件封装代码:

<script setup>
import { toRefs } from 'vue';
import { ElPagination } from 'element-plus';const props = defineProps({pageIndex: Number,pageSize: Number,total: Number,
});const { pageIndex, pageSize, total } = toRefs(props);const emit = defineEmits(['onChangePage']);const changePage = (page) => {emit('onChangePage', page);
};
</script><template><ElPaginationv-model:current-page="pageIndex"v-model:page-size="pageSize"class="lj-paging"layout="total, prev, pager, next, jumper":pager-count="5":total="total"@current-change="changePage"/>
</template><style lang="scss" scoped>
.lj-paging {:deep(button) {width: 25px;height: 25px;margin: 0 4px;border-radius: 50%;i {font-size: 18px !important;}}:deep(.el-pager) {li {width: 25px;height: 25px;margin: 0 4px;color: #4382bc;font-size: 12px;line-height: 25px;border-radius: 50%;&.is-active {color: #00f2fb;font-weight: normal;background: none;border: 1px solid #00f2fb;box-shadow: 0 0 10px 0#00f2fb;}}}:deep(.el-pagination__jump) {font-size: 12px;}:deep(.el-input__inner) {font-size: 12px !important;}
}
</style>

调用:

 <PageIndex :total="100" :page-index="1" :page-size="10" @on-change-page="onChangePage" />

这篇关于vue3 分页组件的封装 el-pagination以及调用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---