elementUI table pagination 表格、分页查询二次封装
第一部分：
table pagination 分页查询封装
src=>components=>common=> BaseTable.vue
<template>
<div>
<el-table
:class="customer ? 'common-customer-table' : ''"
ref="table"
v-loading="tableDataloading"
:data="tableData"
:height="$attrs['height']"
:highlight-current-row="$attrs['highlight-current-row']"
v-bind="$attrs"
v-on="$listeners"
:header-cell-style="{ background: '#F3F4F7', height: '40px', textAlign: 'center' }"
:border="border"
:show-header="showHeader"
:row-style="{ height: '70px' }"
>
<el-table-column label="序号" width="70px" align="center" v-if="isShowIndex">
<template slot-scope="scope">
<div>
{{ scope.$index + (currentPage - 1) * pageSize + 1 }}
</div>
</template>
</el-table-column>
<!-- 法律法规专用插槽 -->
<slot name="law" />
<!-- 过程控制-审核提醒专用插槽 -->
<slot name="reviewRemind" />
</el-table>
<el-pagination
v-if="total"
background
class="pagination"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total"
></el-pagination>
</div>
</template>
<script>
export default {
props: {
showHeader: {
type: Boolean,
default: true,
},
customer: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
isShowIndex: {
type: Boolean,
default: true,
},
tableDataloading: {
type: Boolean,
default: false,
required: false,
},
// 分页数据总数
total: {
type: Number,
default: 0,
required: false,
},
// 单页数据量
pageSize: {
type: Number,
default: 10,
required: false,
},
// 当前页码
currentPage: {
type: Number,
default: 1,
required: false,
},
// 表格数据
tableData: {
type: Array,
default: () => [],
required: false,
},
// 表头数据
// columnData: {
// type: Array,
// required: true,
// },
},
data() {
return {}
},
methods: {
//当前页码改变
handleCurrentChange(currentPage) {
this.$emit('handleCurrentChange', currentPage)
},
//每页显示条目个数改变
handleSizeChange(pageSize) {
this.$emit('handleSizeChange', pageSize)
},
//翻页返回表格顶部
getTableDom() {
this.$nextTick(() => {
this.$refs.table.bodyWrapper.scrollTop = 0
})
},
},
}
</script>
<style scoped>
.tableButtons {
float: right;
margin-top: 20px;
}
.pagination {
text-align: right;
margin-top: 20px;
margin-bottom: 30px;
}
</style>
第二部分
父组件1 使用BaseTable组件
<base-table
ref="baseTable"
:highlight-current-row="true"
:tableData="historyData"
:total="tablePagination.total"
:pageSize="tablePagination.pageSize"
:currentPage="tablePagination.currentPage"
@handleSizeChange="baseTableHandleSizeChange"
@handleCurrentChange="baseTableHandleCurrentChange"
:tableDataloading="tableDataloading"
>
<template slot="reviewRemind">
<el-table-column
v-for="item in recordsColums"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:type="item.type"
:prop="item.key"
:label="item.title"
:key="item.key"
>
</el-table-column>
<el-table-column label="操作" align="center">
<el-button type="primary" @click="operation()">操作</el-button>
</el-table-column>
</template>
</base-table>
data() {
return {
rowId: '',
historyData: [],
tablePagination: {
total: 0,
currentPage: 1,
pageSize: 10,
},
}
}
methods:{
//当前页码改变
baseTableHandleCurrentChange(currentPage) {
this.tablePagination.currentPage = currentPage
this.getProcessControlVersions(this.rowId, this.tablePagination.pageSize, currentPage)
},
//每页显示条目个数改变
baseTableHandleSizeChange(pageSize) {
this.tablePagination.pageSize = pageSize
this.getProcessControlVersions(this.rowId, pageSize, this.tablePagination.currentPage)
},
//如果表格是在弹窗中，记得重置表格数据
closeProcessRecordDialog() {
this.historyData = []
this.tablePagination.total = 0
this.tablePagination.currentPage = 1
this.tablePagination.pageSize = 10
this.processRecordShow = false
},
//过程控制历史数据
getProcessControlVersions(id, pageSize, currentPage) {
this.tableDataloading = true
getProcessControlVersions({
id: id,
pageSize: pageSize,
currentPage: currentPage,
})
.then((res) => {
if (res && res.data && res.data.data && res.data.data.list) {
this.historyData = res.data.data.list
this.tablePagination.total = res.data.data.total
this.tableDataloading = false
// 翻页或者改变当前页线束数目时需要将table表格翻页后 回到第一行
this.$nextTick(() => {
this.$refs.baseTable.getTableDom()
})
} else {
this.historyData = []
this.tablePagination.total = 0
this.tableDataloading = false
}
})
.catch((err) => {
this.historyData = []
this.tablePagination.total = 0
this.tableDataloading = false
})
},
}
export const recordsColums = [
// {
// key: 'num',
// title: '序号',
// scopedSlots: { customRender: 'num' } // 个性化需要设置此字段
// },
{
key: 'applyType',
title: '申请类型',
},
{
key: 'reason',
title: '变更事由',
},
{
key: 'progress',
title: '办理进度',
}
]
父组件2 使用BaseTable组件
<base-table
v-if="tableVisible"
:tableDataloading="loading"
:tableData="tableData"
:isShowIndex="false"
:border="false"
:total="tablePagination.total"
:pageSize="tablePagination.pageSize"
:currentPage="tablePagination.currentPage"
@handleSizeChange="baseTableHandleSizeChange"
@handleCurrentChange="baseTableHandleCurrentChange"
:showHeader="false"
>
<template slot="law">
<el-table-column align="left" prop="lawName">
<template slot-scope="scope">
<!-- <span style="position: relative;top:3px; color: #2f6b98;font-size: 40px">·</span> -->
<el-button
@click="handlerLawName(scope.row)"
style="color: #2f6b98; font-size: 16px; font-family: 'Microsoft Yahei'"
type="text"
>{{ scope.row.lawName }}</el-button
>
</template>
</el-table-column>
<el-table-column align="right" prop="lawType" :width="100">
<template slot-scope="scope">
<span style="color: #2f6b98" type="text">{{
scope.row.lawType == 'air' ? '废气' : '废水'
}}</span>
</template>
</el-table-column>
<el-table-column align="right" prop="fabuDate" :width="100">
<template slot-scope="scope">
<span style="color: #2f6b98" type="text">{{ scope.row.fabuDate }}</span>
</template>
</el-table-column>
</template>
</base-table>
