最简单的element分页组件二次封装

Posted 2020-11-25 aguncn

我感觉是最简单的，

因为我看别人的实现，要么带sync，要么传父组件函数。

而我这个，我觉得隔离得比较好。

pagnation.vue(父组件传一个pageRequest过来,分页组件返回给父组件一个refreshPageRequest）

)

<template>
    <div>
        <div class="toolbar" style="padding:10px;">
            <el-pagination 
              layout="total, prev, pager, next, jumper"
              @current-change="refreshPageRequest"
              :current-page="pageRequest.pageNum"
              :page-size="pageRequest.pageSize"
              :total="pageRequest.totalSize"
              style="float: right;">
            </el-pagination>
        </div>
        
    </div>
</template>

<script>
    export default {
        name: ‘Pagnation‘,
        props: {
            pageRequest: {
                type: Object,
                required: true
            }
        },
        methods: {
            refreshPageRequest: function(pageNum) {
                this.$emit(‘refreshPageRequest‘, pageNum)
            }
        }
    }
</script>

<style>
</style>

调用组件方

注意，按如下更新pageSize和totalSize，才会分页显示正常，相当于其它人提到的再次刷新。

this.$set(this.pageRequest,"pageSize", res.data.pageSize)
this.$set(this.pageRequest,"totalSize", res.data.totalSize)

<template>
    <div>
        <div class="toolbar" style="float:left;">
            <el-form :inline="true" :model="Filters" :size="size">
                <el-form-item>
                    <el-input v-model="Filters.label" placeholder="Pod名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t(‘action.search‘)" type="primary" @click="listPod(null)"/>
                </el-form-item>
            </el-form>
        </div>
        <el-table 
          :data="pageResult.content"
          :highlight-current-row="highlightCurrentRow"
          v-loading="loading"
          :element-loading-text="$t(‘action.loading‘)"
          :border="border"
          :stripe="stripe"
          :show-overflow-tooltip="showOverflowTooltip"
          :max-height="maxHeight"
          :size="size"
          :align="align"
          style="width:100%;">
            <el-table-column 
              v-for="column in podColumns"
              header-align="center"
              align="center"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :min-width="column.minWidth"
              :fixed="column.fixed"
              :key="column.pro"
              :type="column.type"
              :formatter="column.formatter"
              :sortable="column.sortable==null?true:column.sortable">
            </el-table-column>
            <el-table-column
              :lable="$t(‘action.operation‘)"
              width="185"
              fixed="right"
              header-align="center"
              align="center">
                <template slot-scope="scope">
                    <kt-button 
                      :label="$t(‘action.terminal‘)"
                      :size="size"
                      type="primary"
                      @click="handleEnter(scope.row)" />
                </template>
            </el-table-column>
        </el-table>
        <pagnation :pageRequest="pageRequest" @refreshPageRequest="refreshPageRequest" />
    </div>
</template>

<script>
    import KtButton from ‘@/views/core/KtButton‘
    import Pagnation from ‘@/components/Pagnation‘
    export default {
        name: ‘KtTable‘,
        components: {
            KtButton,
            Pagnation
        },
        data() {
            return {
                size: ‘small‘,
                loading: false,
                Filters: {
                    label: ‘‘
                },
                pageshow: false,
                podColumns: [
                    {prop:"id", label:"ID", minWidth:50},
                    {prop:"nameSpace", label:"NameSpace", minWidth:120},
                    {prop:"service", label:"Service", minWidth:120},
                    {prop:"deploy", label:"Deploy", minWidth:120},
                    {prop:"label", label:"Pod", minWidth:120},
                    {prop:"createTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
                ],
                
                pageRequest: { pageNum: 1},
                pageResult: {},
                align: ‘left‘,
                maxHeight: 420,
                showOperation: true,
                border: false,
                stripe: true,
                highlightCurrentRow: true,
                showOverflowTooltip: true
            }
        },
        methods: {
            listPod: function (data) {
                // 在获取到数据之前，显示加载中状态
                this.loading = true
                // 如果是查询数据，则传递给listApp的是null，这个时机，可以获取查询的参数，并重新请求第1页。
                // 否则， 参数为分页的对象
                if (data === null) {
                    this.pageRequest.pageNum = 1
                    this.pageRequest.params = [{name:‘label‘, value:this.Filters.label}]
                } else {
                    this.pageRequest = data
                }
                
                // 前端只需要初始化一个pageNum， 其它分页数据由后端获取
                this.$api.pod.listPod(this.pageRequest).then((res) => {
                    this.pageResult = res.data
                    this.$set(this.pageRequest,"pageSize", res.data.pageSize)
                    this.$set(this.pageRequest,"totalSize", res.data.totalSize)
                })
            
                // 在获取到数据之后，取消加截中的状态
                this.loading = false
            },

            refreshPageRequest: function(pageNum) {
                this.pageRequest.pageNum = pageNum
                this.listPod(this.pageRequest)
            },
            handleEnter: function(row) {
                this.$emit(‘handleEnter‘, {row:row})
            }
        },
        mounted() {
            this.listPod(this.pageRequest)
        }
    }
</script>

这样一来，同一个网页，多个分页都不干扰。