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>