vue_前端分頁操作

<template>
   <div>
      <template>
         <el-table
            :data="currentPageData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%;line-height: 50px;">
            <el-table-column
               label="ID"
               prop="filmId">
            </el-table-column>

            <el-table-column
               label="預覽圖"
               prop="imageId">
            </el-table-column>

            <el-table-column
               label="電影名稱"
               prop="filmName">
            </el-table-column>

            <el-table-column
               label="導演"
               prop="director">
            </el-table-column>

            <el-table-column
               label="電影時長（分）"
               prop="duration">
            </el-table-column>

            <el-table-column
               label="電影價格（元）"
               prop="price">
            </el-table-column>

            <el-table-column
               label="上映時間"
               prop="date">
            </el-table-column>


            <el-table-column
               align="right">
               <template slot="header" slot-scope="scope">
                  <el-input
                     v-model="search"
                     size="small"
                     placeholder="搜索"></el-input>
               </template>
               <template slot-scope="scope">
                  <el-button type="primary" round
                           size="small "
                           @click="handleEdit(scope.$index, scope.row)">編輯
                  </el-button>
                  <el-button type="danger" round
                           size="small "
                           @click="handleDelete(scope.$index, scope.row)">刪除
                  </el-button>
               </template>
            </el-table-column>
         </el-table>
      </template>
      <!--分頁代碼-->
      <div class="block">

         <!--<el-select v-model="pageSize" placeholder="每頁顯示" size="mini" style="width: 120px" @blur="show(pageSize)">
            <el-option>5條</el-option>
            <el-option>10條</el-option>
            <el-option>15條</el-option>
            <el-option>20條</el-option>
         </el-select>-->

         <el-button type="primary" size="mini" @click="prevPage()">
            上一頁
         </el-button>
         <span>第{{currentPage}}頁/共{{totalPage}}頁</span>
         <el-button type="primary" size="mini" @click="nextPage()">
            下一頁
         </el-button>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <a>共<i>{{totalPage}}</i>頁</a>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <el-button type="info" size="mini" @click="turn(currentPage)">跳轉至</el-button><a>第</a>
         <label><input type="text" style="width: 30px;" v-model="currentPage" @keyup.enter="turn(currentPage)"></label><a>頁</a>

      </div>


   </div>
</template>

<script>
    export default {
        name: 'FilmManage',
        data () {
            return {
                search: '',
                tableData: [],  //所有數據
                totalPage: 0, // 統共頁數，默認為1
                currentPage: 1, //當前頁數 ，默認為1
                pageSize: 7, // 每頁顯示數量
                currentPageData: [] //當前頁顯示內容
             }
        },
        components: {},
        mounted(){},
        created: function () {
            var arr = this
            arr.axios.get('film/listFilm')
                .then((response) => {
                    console.log(response.data)//請求的返回體
                    arr.tableData = response.data
                })
                .catch((error) => {
                    console.log(error)//異常
                })
            arr.axios.get('film/count')
                .then((response) => {
                    console.log(response.data)//請求的返回體
                    // 計算一共有幾頁
                    this.totalPage = Math.ceil(response.data/this.pageSize);
                    console.log(this.totalPage)

                    this.getCurrentPageData();
                })
                .catch((error) => {
                    console.log(error)//異常
                })

        },

        methods: {
            /*編輯和刪除*/
            handleEdit (index, row) {
                console.log(index, row)
            },
            handleDelete (index, row) {
                console.log(index, row)
            },
            /*分頁操作*/
            // 設置當前頁面數據，對數組操作的截取規則為[0~9],[10~20]...,
            // 當currentPage為1時，我們顯示(0*pageSize+1)-1*pageSize，當currentPage為2時，我們顯示(1*pageSize+1)-2*pageSize...
            getCurrentPageData() {
                let begin = (this.currentPage - 1) * this.pageSize;
                let end = this.currentPage * this.pageSize;
                this.currentPageData = this.tableData.slice(
                    begin,
                    end
                );
            },
            //上一頁
            prevPage() {
                console.log(this.currentPage);
                if (this.currentPage === 1) {
                    return false;
                } else {
                    this.currentPage--;
                    this.getCurrentPageData();
                }
            },
            // 下一頁
            nextPage() {
                if (this.currentPage === this.totalPage) {
                    return false;
                } else {
                    this.currentPage++;
                    this.getCurrentPageData();
                }
            },
         /*跳轉*/
            turn(currentPage) {
                let begin = (currentPage - 1) * this.pageSize;
                let end = currentPage * this.pageSize;
                this.currentPageData = this.tableData.slice(
                    begin,
                    end
                );
            },
            /*每頁顯示*/
            show(size) {
                let begin = (this.currentPage - 1) * size;
                let end = this.currentPage * size;
                this.currentPageData = this.tableData.slice(
                    begin,
                    end
                );
            },
        },
    }
</script>

<style scoped>

</style>