83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<!--
|
|
* @Author: your name
|
|
* @Date:
|
|
* @LastEditTime: 2024-2-22 10:18:11
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: \aiguo_erp_vue\src\components\pagination\pagination.vue
|
|
-->
|
|
<template>
|
|
<div class="block">
|
|
<div style="display: flex;">
|
|
<span v-if="costVisible" style="font-weight: bold; padding-left:10px;width: 90px;">本页信息:</span>
|
|
<div v-if="costVisible" class="box">
|
|
<span style="padding: 0 10px" v-for="(item, index) in cost" :key="index">{{ item.text + item.value }}</span>
|
|
</div>
|
|
<div v-else></div>
|
|
</div>
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum"
|
|
:page-sizes="page.pagesizes" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
|
|
:page-size.sync="page.pageSize"></el-pagination>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"erpEltablePagination",
|
|
data() {
|
|
return {
|
|
Obj: {
|
|
list_row: this.page.pageSize,
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
currentPage4: {
|
|
type: Number,
|
|
},
|
|
page: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
costVisible: {
|
|
default: () => false
|
|
},
|
|
//统计
|
|
cost: {
|
|
default: () => []
|
|
}
|
|
},
|
|
methods: {
|
|
//选择每页条数
|
|
handleSizeChange(data) {
|
|
this.Obj.list_row = data;
|
|
this.$emit("handleSizeChange", this.Obj);
|
|
},
|
|
//点击页码
|
|
handleCurrentChange(data) {
|
|
this.Obj.page = data;
|
|
this.$emit("handleCurrentChange", this.Obj);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.block {
|
|
height: 50px;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|