vue.js分页

<div class="contanier">
//绑定显示的数据容器
</div>
<div class="pagination">
            <div class="pages-box">
                <div class="pages-prev" @click="pagePrev()">
                    <svg-icon icon-class="up" class="fillcolor" :class="{'disabled': currentPage === 1 }" />
                </div>
                <div class="pages">{{ currentPage }}/{{ pageCount }}</div>
                <div class="pages-next" @click="pageNext()">
                    <svg-icon icon-class="down" class="fillcolor" :class="{'disabled': currentPage === pageCount}" />
                </div>
            </div>
        </div>

data() {
        return {
           
            labourOption: {},
            showPage: [], // 每页展示的内容
            pageSize: 8, // 每页要展示数据条数
            // 总页数
            pageCount: '',
            pageItems: [],
            // 当前页
            currentPage: 1,
            colorData:['#EB9AFF','#25A54F','#2CC6EA','#0263FF','#FB6E52','#8256E8','#FF7E00','#FFC655'],
            seriesData: [],
           }
        }

 created() {
        // 求总页数，Math.ceil()方法 可以对数进行上舍入
        // this.pageCount = Math.ceil(this.seriesData.length / this.pageSize)
        // this.curpage(this.currentPage)
        this.getData()
   
    },

 

methods:{
// 获取数据
        getData() {
            chartCount(this.queryParams).then(res => {
               // 获取数据
                this.seriesData = res.data.organization
               /* // 替换需要的key名字
                this.seriesData && this.seriesData.forEach((item, index) => {
                    this.seriesData[index] = JSON.parse(
                        JSON.stringify(this.seriesData[index])
                            .replace(/statisCount/g, 'value')
                            .replace(/typeName/g, 'name')
                    )
                    // this.seriesData.push({
                    //     value: i.statisCount,
                    //     name: i.typeName
                    // })
                })*/
                this.getOptions()
            })
        },
 getOptions() {
            this.pageCount = Math.ceil(this.seriesData.length / this.pageSize)
            let list = (this.currentPage - 1) * this.pageSize // 每去一组数据的第一个索引
            this.showPage = this.seriesData.slice(list, list + this.pageSize) // 从总数据中取出每页的数据

            /* this.showPage = this.seriesData.slice(
                (this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize
            )*/
        },
// 翻页传值
        curpage(num) {
            this.currentPage = num // 当前页
        },
        pagePrev() {
            if (this.currentPage != 1) {
                this.currentPage--
                this.curpage(this.currentPage)
            }
            this.getOptions()
        },
        pageNext() {
            if (this.currentPage < this.pageCount) {
                this.currentPage++
                this.curpage(this.currentPage)
            }
            this.getOptions()
        }
}

<style lang="scss" scoped>
    .pagination{
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        padding: 5px 0;
        .pages-box{
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            .pages{
                margin: 0 5px;
                color: #00CAFF;
            }
        }
        .fillcolor{
            fill: #2A72FF;
        }
        .disabled{
            fill: #052666 ;
        }
    }
</style>