PrimeVue的DataTable数据表格动态分页

因看官方文档发现它的分页是静态分页（即把所有数据查出来，前端分页）--也许是我没认真看的原因，没找到类似elementUI的el-table动态分页，官方只提供一个@page方法，时间紧迫，所以我花了一点点时间在此方法基础上写了动态分页，如下：

HTML（基于PrimeVue）：

<!-- 点击此button执行查询，下面dataTable的分页器里的:first属性就是为了让每次点击查询都从第一页开始显示 -->
<Button label="查询" icon="pi pi-search" class="p-button-info p-mr-1" @click="QueryBefore" />

 <!-- rows(每页条数) 和 totalRecords（总记录数）是分页器的必需属性。rows每页显示的条数，totalRecords总记录数。 -->
                <!-- <DataTable @page="onPage($event)" :value="products" :selection.sync="selectedProducts" :rows="10"
                 :totalRecords="totalRecords1" dataKey="id" :paginator="true" :filters="filters" :rowHover="true" 
                 paginatorTemplate=" FirstPageLink PrevPageLink PageLinks
                  NextPageLink LastPageLink RowsPerPageDropdown  CurrentPageReport"
                 :rowsPerPageOptions="[10,20,30]" currentPageReportTemplate=" 显示第 {first} 
                 到第 {last} 条记录，总共 {totalRecords} 条记录 " class="p-datatable-customers" > -->
                 <DataTable :value="products" :rows="10" :selection.sync="selectedProducts" :filters="filters" >
                    <Column field="id" header="序号">
                        <template #body="slotProps">
                            <!-- 数据在当前页面的索引+（当前页码数-1）* 每页条数+1-->
                            <!-- {{ slotProps.index+(currentPage - 1) * pageSize + 1 }} -->
                            <!-- 数据在当前页面的索引+first+1-->
                            <!-- {{ slotProps.index+first}} -->
                            {{ fomatterSort(slotProps) }}
                        </template>
                    </Column>
                    <Column field="ShipName"  header="船舶名称"></Column>
                    <Column header="线路">
                        <template #body="slotProps">
                            {{formatCurrency(slotProps.data.LineMc)}}
                        </template>
                    </Column>
                    <Column field="price" header="发班日期" sortable>
                        <template #body="slotProps">
                            {{formatCurrency(slotProps.data.DispatchDate)}}
                        </template>
                    </Column>
                    <Column field="category" header="座位数"></Column>
                    <Column field="inventoryStatus" header="航次状态" sortable>
                        <template #body="slotProps">
                            <!-- <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> -->
                        </template>
                    </Column>
                    <Column field="rating" header="备注">
                        <template #body="slotProps">
                            <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
                        </template>
                    </Column>
                    <Column>
                        <template #body="slotProps">
                            <Button icon="pi pi-check" class="p-button-rounded p-button-success p-mr-2" @click="confirmProduct(slotProps.data)" v-tooltip.top="'确认'" />
                            <Button icon="pi pi-pencil" class="p-button-rounded p-button-warning p-mr-2" @click="editProduct(slotProps.data)" v-tooltip.top="'修改'" />
                            <Button icon="pi pi-trash" class="p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" v-tooltip.top="'删除'" />
                        </template>
                    </Column>
                </DataTable>
                <!-- 分页器 -->
                <Paginator :first="first" :rows="10" :totalRecords="totalRecords1" :rowsPerPageOptions="[10,20,30]"  @page="onPage($event)">
                    <template #right="slotProps">
                        <!-- {{fomattqqq(slotProps.state)}} -->
                        <!-- 页码： {{slotProps.state.page+1}}
                        当前页第一条数据为{{slotProps.state.first+1}}条记录
                        每页{{slotProps.state.first+1+slotProps.state.rows}}条记录 -->
                        <!-- 显示第 {{slotProps.state.first}}
                         到第 {{slotProps.state.last}} 条记录
                         ，总共 {{slotProps.state.totalRecords}} 条记录 --> 
                         共{{totalRecords1}}条记录
                    </template>
                </Paginator>

js方法（主要是watch和methods）：

data() {
    return {
        products：null,//dataTable数据源
　　　　 first: 0,//first 属性定义分页器显示的第一项的索引
        zero:0,//其实zero就是first，两个用其中一个即可
        currentPage: 1, //默认开始页面 默认1
        pageSize: 10, //每页的数据条数 默认10
        totalRecords1:0,//总条数
    }
}，
watch:{
    pageSize:function(newv,oldv){//只要每页条数变化且查过数据，立马把默认页码设为第一页，并执行查询
        debugger
        this.currentPage=1
        this.zero=0
　　　　 this.first = 0
        if (this.products==null||this.products.length==0) {
            
        }else{
            this.Query()
        }
    },
    currentPage:function(newv,oldv){//只要页码改变，执行查询
        this.Query()
    }
},
methods: {
    /* *
     *@effect:以下两个方法就能对PrimeVue的DataTable排序
     *@author:XYG
     */
    onPage(event) {//①、页面改变时，先把页面第一条数据的索引赋值给全局变量zero
        debugger
        // event.page: New page number//新页面数量
        // event.first: Index of first record//当前页面第一记录索引
        // event.rows: Number of rows to display in new page//在新页面中显示的行数
        // event.pageCount: Total number of pages//当前总页数
        /** 
         * 此处遇到的问题：当改变每页显示条数时，页码不会重置为第一页(即当重新选择每页条数时，
         *需要重新从第一条开始查，所以为了满足此，需要watcher监听每页条数的变化来重置默认页码=1)
         */
        this.currentPage=event.page+1//当前页码索引（即你现在点击第四页，nameevent.page=3）
        this.pageSize=event.rows//当前每页条数
　　　　 this.first=event.first//
        /** event.first当每页显示条数从小变大的时候，会重置为默认0，但是从大变小时缺不会重置，
         *所以也要一起写在每页显示条数的watcher里重置值 
         */
        this.zero=event.first
        // 为了防止重复调用后台，所以全部查询都写在watcher里(页码改变watcher+每页行数改变watcher)
    },

    fomatterSort(prop){//②、把获取到的当前页面第一个索引取过来（this.zero这个全局变量），然后加上当前行在本页面的索引+1就可以对DataTable排序
        // prop.index是当前数据在其页面对应的索引
        // this.zero+=1
        let aa=this.totalRecords1
        return this.zero + prop.index + 1;
    }，

QueryBefore() {//点击查询
    this.currentPage = 1
    this.first=0//页码
    this.zero=0 //
    this.Query();
   },

    Query() {//查询
      let  gsdm='2019090514114409687404237f793de'//this.$store.getters.gsdm
      debugger
      shipslist(this.ShipsName, this.calendarValue,gsdm, this.currentPage,this.pageSize).then(res => {
        debugger
        this.products = res.response.data
        this.totalRecords1 = res.response.dataCount
      }).catch(error => {
        this.$toast.add({
            severity: 'warn',
            summary: '提示',
            detail: '查询失败！',
            life: 3000
        });
      })
    },
}

 效果：

注：本文档完全是自己的笔记，转载请注明出处，因时间紧迫，只实现了功能。