vueシンプルなフロントエンドページング機能を実現

2527 ワード

考え方:各ページに10件、合計100件が表示されると仮定すると、合計10ページ、第1ページに1-10件のデータが表示され、第2ページに11-20件のデータが表示されます...このように推すと考えがあるのではないでしょうか.
コード:




let productList = [];
for (let i = 0; i < 99; i++) {
    productList.push({
        name: " " + i + "   ",
        count: Math.random() * 100
    });
}
export default {
    data() {
        return {
            productList, //    
            totalPage: 1, //     ，   1
            currentPage: 1, //     ，   1
            pageSize: 10, //       
            currentPageData: [] //       
        };
    },
    mounted() {
        //        
        this.totalPage = Math.ceil(this.productList.length / this.pageSize);
        //    0    1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        this.setCurrentPageData();
    },
    methods: {
        //         ，           [0~10],[10~20]...,
       setCurrentPageData() {
            let begin = (this.currentPage - 1) * this.pageSize;
            let end = this.currentPage * this.pageSize;
            this.currentPageData = this.productList.slice(
                begin,
                end
            );
        },
        //   
        prevPage() {
            console.log(this.currentPage);
            if (this.currentPage == 1) return;
         
             this.currentPage--;
             this.setCurrentPageData();
            
        },
        //    
        nextPage() {
            if (this.currentPage == this.totalPage)return ;

             this.currentPage++;
             this.setCurrentPageData();
            
        }
    }
};

図面が貼れないから、自分でスタイルを書いてください.
htmlコード:

    
        
            
                
                    
                          
                          
                    
                
                
                    
                        
                            {{item.name}}
                        
                        
                            {{item.count}}
                        
                    
                
            
        
        
            
             {{currentPage}} / {{totalPage}}