93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<!--
|
|
* @Author: 表格分页
|
|
* @Date: 2023-10-20 09:34:38
|
|
* @LastEditTime: 2023-11-13 18:34:05
|
|
* @LastEditors: your name
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: \project\src\components\aboutTable\Pages\index.vue
|
|
-->
|
|
<template>
|
|
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
|
{{ pageData.configer }}
|
|
<el-pagination
|
|
:current-page="
|
|
pageData.configer.currentPage ||
|
|
pageData.configer.pageNo ||
|
|
pageData.configer.current ||
|
|
pageData.configer.pageNum ||
|
|
pageData.configer.pageCurrent"
|
|
:page-size="pageData.configer.pageSize || pageData.configer.size"
|
|
:page-sizes="pageSizeArr"
|
|
:small="small"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="pageData.configer.total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, watchEffect } from "vue";
|
|
|
|
const props = defineProps({
|
|
pageSizeArr: {
|
|
type: Array,
|
|
default: () => [10, 20, 50, 100]
|
|
},
|
|
background: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
small: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
marginTop: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
tableHeight: {
|
|
type: Number
|
|
},
|
|
pageConfiger: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
total: 0
|
|
};
|
|
}
|
|
}
|
|
});
|
|
const pageData = reactive({
|
|
configer: {}
|
|
});
|
|
const emit = defineEmits(["changeSize", "changeNo"]);
|
|
// 改变每页条数
|
|
const handleSizeChange = (val) => {
|
|
emit("changeSize", val);
|
|
};
|
|
// 翻页
|
|
const handleCurrentChange = (val) => {
|
|
emit("changeNo", val);
|
|
};
|
|
watchEffect(() => {
|
|
pageData.configer = props.pageConfiger;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// ::v-deep .el-pagination.is-background .btn-next, ::v-deep .el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .el-pager li{
|
|
// background-color: transparent;
|
|
// color: white;
|
|
// }
|
|
</style>
|