最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么设置分页

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js设置分页的方法:

    1.安装依赖库(需要用到bootstrap的css样式)及分页插件(vuejs-paginate)

    npm install [email protected] -–save-dev
    npm install vuejs-paginate --save

    2.封装此分页插件,根据自己需要的功能封装,调用起来会更简洁

    <template>
      <div class="paginate_container">
        <paginate
          :page-count="pageCount"
          :margin-pages="marginPages"
          :page-range="rangePage"
          :initial-page="initPage"
          :click-handler="pageEvent"
          prev-text="上一页"
          next-text="下一页"
          :container-class="'pagination'"
          :page-class="'page-item'"
          :page-link-class="'page-link-item'"
          :prev-class="'prev-item'"
          :prev-link-class="'prev-link-item'"
          :next-class="'next-item'"
          :next-link-class="'next-link-item'"
        ></paginate>
      </div>
    </template>
    <script>
    import 'bootstrap/dist/css/bootstrap.min.css'
    import paginate from "vuejs-paginate"
    export default {
        props:{
            pageCount:Number,
            marginPages:Number,
            rangePage:Number,
            initPage:Number,
        },
      components: { paginate },
      },
      methods: {
        pageEvent: function(e) {
          console.log(e);
          this.$emit("pageEvent", e); //将值放在自定义的事件函数中作为参数
        }
      }
    };
    </script>
    <style scoped>
    .paginate_container {
      /* widows: 100%;
      height: 20px; */
      /* display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center; */
    }
    .page-item {
    }
    .page-link-item {
    }
    .prev-item {
    }
    .prev-link-item {
    }
    .next-item {
    }
    .next-link-item {
    }
    </style>

    3.父组件中调用封装的组件

    <template>
      <div class="hello">
      <cpaginate
       :pageCount="pageCount" 
       :marginPages="marginPages" 
       :rangePage="rangePage" 
       :initPage="initPage" 
       @pageEvent="pageEvent">
       </cpaginate>
      </div>
    </template>
    <script>
    import cpaginate from './customPaginate'
    export default {
      components:{cpaginate},
      data () {
        return {
          pageCount:20,
          marginPages:2,
          rangePage:5,
          initPage:0,
        }
      },
      methods:{
        pageEvent:function(e){
          console.log(e)
        }
      }
    }
    </script>
    <style scoped>
    .demo{
    }
    </style>

    以上就是vue.js怎么设置分页的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么设置分页
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情