The simplest element assembly for a secondary package tab

I feel is the easiest,

Because I do realize other people, either with sync, either parent component transfer function.

And me, I feel better than isolation.

pagnation.vue (parent components pass over a pageRequest, paging component is returned to a parent components 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>

Calling component party

Note the following update pageSize and totalSize, will show pages correctly, the equivalent of refresh again others mentioned.

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',
                the maxHeight: 420. , 
                showOperation: to true , 
                border: to false , 
                stripe: to true , 
                highlightCurrentRow: to true , 
                showOverflowTooltip: to true 
            } 
        }, 
        Methods: { 
            listPod: function (Data) {
                 // before acquiring the data showing the loading state 
                the this . = loading to true 
                // If the query data, then passed to listApp is null, this time to help get the query parameters, and re-request page 1. 
                // Otherwise, the parameters for the page object 
                if(Data === null ) {
                     the this .pageRequest.pageNum. 1 =
                     the this .pageRequest.params = [{name: 'label', value: the this .Filters.label}] 
                } the else {
                     the this .pageRequest = Data 
                } 
                
                // distal initialized only a pageNum, paged data acquired by the other rear end 
                the this . $ api.pod.listPod ( the this .pageRequest) .then ((RES) => {
                     the this .pageResult = res.data
                     the this. $ SET (this.pageRequest , "pageSize", res.data.pageSize)
                    . the this $ SET (this.pageRequest, "totalSize" , res.data.totalSize) 
                }) 
            
                // after acquiring the data, cancel the cut in a state plus 
                the this .loading = to false 
            }, refreshPageRequest:

             function (pageNum) { 
                the this = pageNum .pageRequest.pageNum 
                this.listPod (the this .pageRequest) 
            }, 
            handleEnter: function (Row) {
                 the this . $ EMIT ( 'handleEnter' , {Row: Row}) 
            } 
        }, 
        Mounted () { 
            the this .listPod ( the this .pageRequest) 
        } 
    }
 </ Script>

As a result, the same page, multiple pages are not interfering.