Vue中实现分页-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue中实现分页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.构造分页组件，并注册为全局组件

<template>
    <div class="pagination">
      <button v-if="startNumAndEndNum.start>1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
      <button v-if="startNumAndEndNum.start>1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
      <button v-if="startNumAndEndNum.start>2">···</button>
        <!-- 中间部分 -->
      <template  v-for="(page,index) in startNumAndEndNum.end">
        <button
        :key="index" 
        v-if="startNumAndEndNum.start<=page"
        @click="$emit('getPageNo',page)"
        :class="{active:pageNo==page}"
        > 
        {{page}}
        </button>
       </template>  

      
      <button v-if="startNumAndEndNum.end<allPage-1">···</button>
      <button v-if="startNumAndEndNum.end<allPage" @click="$emit('getPageNo',allPage)" :class="{active:pageNo==allPage}">{{allPage}}</button>
      <button v-if="startNumAndEndNum.end!=allPage" @click="$emit('getPageNo',pageNo+1)">下一页</button>
      
      <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
  </template>
  
  <script>
    export default {
      name: "Page",
      props:['pageNo','pageSize','total','continues'],
      computed:{
        //计算总页数
        allPage(){
            //向上取整
            return Math.ceil(this.total / this.pageSize)
        },
        //计算 连续页码 起始数据和结束数据[连续页码至少是5]
        startNumAndEndNum(){
            //先定义两个变量存储开始与结束的数字
            let start=0,end=0;
            //如果数据不够5页(不正常现象)
            if(this.allPage<this.continues){
                start=1,
                end=this.allPage
            }else{
                start=this.pageNo - parseInt(this.continues/2),
                end=this.pageNo + parseInt(this.continues/2)
                //当当前页为1时 start为-1 
                if(start<1){
                    start=1,
                    end=this.continues
                }
                //纠正end 
                if(end>this.allPage){
                    end=this.allPage,
                    start=end-this.continues + 1
                }
                
            }
            return {start,end}
        }

      }
    }
  </script>
  
  <style lang="less" scoped>
    .pagination {
      text-align: center;
      button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
          color: #c0c4cc;
          cursor: not-allowed;
        }
  
        &.active {
          cursor: not-allowed;
          background-color: #409eff;
          color: #fff;
        }
      }
    //   button:active {
    //     color: rgba(235, 217, 55, 0.935);
    //     border: 1px solid orange;
    // }
    .active{
      background-color: skyblue;
    }
    }
  </style>

2.使用分页组件文章来源地址https://www.toymoban.com/news/detail-660450.html

<template>
  <div>
          <!-- 分页组件 -->
          <Page 
          :pageNo="params.pageNo" 
          :pageSize="params.pageSize" 
          :total="total" 
          :continues="5"
          ref="pg"
          ></Page>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "Search",
  data() {
    return {
      params: {
        //分页器参数
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.$refs.pg.$on('getPageNo',(pageNo)=>{
        this.params.pageNo=pageNo
        this.getSearch(this.params)
      })
  },
  computed: {
    //获取search模块展示的总数据条数
    ...mapState({
      total:state=>state.search.searchList.total
    })
  },
  methods: {
    //向服务器发请求获取search模块数据，根据参数不同返回不同的数据
    //把这次请求封装成函数，需要时候调用即可
    getSearch(params) {
      this.$store.dispatch("SearchInfo", params);
    },
};
</script>

<style lang="less" scoped>
</style>

到了这里，关于Vue中实现分页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！