VUE實現分頁組件步奏詳解-js教程-PHP中文網

這次帶給大家VUE實現分頁組件步奏詳解，VUE實現分頁組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

分頁是WEB開發中很常用的功能，尤其是在各種前後端分離的今天，後端API返回數據，前端根據數據的count以及當前頁碼pageIndex來計算分頁頁碼併渲染到頁面上已經是很普通很常見的功能了。從最開始的jquery時代到現在的各種各樣的前端框架時代，分頁功能都是必不可少的。

分頁大多數（基本上）情況下都是對非同步資料清單的處理，這裡首先需要明白分頁的流程。

在已知每頁顯示資料量pageSize以及目前頁碼pageIndex的情況下：

請求API，返回第一個螢幕資料（pageSize內）以及所有相關條件的資料總量count
將資料總量傳遞給page元件，來計算頁碼並渲染到頁面上
點擊頁碼，發送請求獲取該頁碼的數據，返回數據總量count以及該頁碼下的數據條目。

由於獲取資料條件的變化（假設是個搜索，關鍵字變了），count是不定的；再或者，有個select下拉框，來控制每頁顯示的資料量pageSize，當它變化的時候，總頁碼肯定也是要變化的。因此很多情況下要重新計算頁碼並渲染。

了解了流程，在Vue中實作一個分頁元件也就變得簡單了。

簡單處理，樣式類似於bootstrap的分頁組件，在第一頁時，禁用上一頁，以及首頁按鈕；在最後一頁時，禁用下一頁，以及尾頁按鈕；超出範圍的頁碼以…來代替，效果圖如下：

了解了流程，在Vue中實作一個分頁元件也就變得簡單了。

分頁組件
template

<template>
  <ul class="mo-paging">
    <!-- prev -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--prev&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="prev">prev</li>
    <!-- first -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--first&#39;, {&#39;paging-item--disabled&#39; : index === 1}]" @click="first">first</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showPrevMore">...</li>
    <li :class="[&#39;paging-item&#39;, {&#39;paging-item--current&#39; : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--more&#39;]" v-if="showNextMore">...</li>
    <!-- last -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--last&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="last">last</li>
    <!-- next -->
    <li :class="[&#39;paging-item&#39;, &#39;paging-item--next&#39;, {&#39;paging-item--disabled&#39; : index === pages}]" @click="next">next</li>
  </ul>
</template>

登入後複製

## style(scss)

.mo-paging {
  display: inline-block;
  padding: 0;
  margin: 1rem 0;
  font-size: 0;
  list-style: none;
  user-select: none;
  > .paging-item {
    display: inline;
    font-size: 14px;
    position: relative;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-left: -1px;
    cursor: pointer;
    color: #0275d8;
    &:first-child {
      margin-left: 0;
    }
    &:hover {
      background-color: #f0f0f0;
      color: #0275d8;
    }
    &.paging-item--disabled,
    &.paging-item--more{
      background-color: #fff;
      color: #505050;
    }
    //禁用
    &.paging-item--disabled {
      cursor: not-allowed;
      opacity: .75;
    }
    &.paging-item--more,
    &.paging-item--current {
      cursor: default;
    }
    //选中
    &.paging-item--current {
      background-color: #0275d8;
      color:#fff;
      position: relative;
      z-index: 1;
      border-color: #0275d8;
    }
  }
}

登入後複製

# javascript

export default {
  name : 'MoPaging',
  //通过props来接受从父组件传递过来的值
  props : {
 
    //页面中的可见页码，其他的以...替代, 必须是奇数
    perPages : { 
      type : Number,
      default : 5 
    },
 
    //当前页码
    pageIndex : {
      type : Number,
      default : 1
    },
 
    //每页显示条数
    pageSize : {
      type : Number,
      default : 10
    },
 
    //总记录数
    total : {
      type : Number,
      default : 1
    },
 
  },
  methods : {
    prev(){
      if (this.index > 1) {
        this.go(this.index - 1)
      }
    },
    next(){
      if (this.index < this.pages) {
        this.go(this.index + 1)
      }
    },
    first(){
      if (this.index !== 1) {
        this.go(1)
      }
    },
    last(){
      if (this.index != this.pages) {
        this.go(this.pages)
      }
    },
    go (page) {
      if (this.index !== page) {
        this.index = page
        //父组件通过change方法来接受当前的页码
        this.$emit(&#39;change&#39;, this.index)
      }
    }
  },
  computed : {
 
    //计算总页码
    pages(){
      return Math.ceil(this.size / this.limit)
    },
 
    //计算页码，当count等变化时自动计算
    pagers () {
      const array = []
      const perPages = this.perPages
      const pageCount = this.pages
      let current = this.index
      const _offset = (perPages - 1) / 2
 
 
      const offset = {
        start : current - _offset,
        end  : current + _offset
      }
 
      //-1, 3
      if (offset.start < 1) {
        offset.end = offset.end + (1 - offset.start)
        offset.start = 1
      }
      if (offset.end > pageCount) {
        offset.start = offset.start - (offset.end - pageCount)
        offset.end = pageCount
      }
      if (offset.start < 1) offset.start = 1
 
      this.showPrevMore = (offset.start > 1)
      this.showNextMore = (offset.end < pageCount)
 
      for (let i = offset.start; i <= offset.end; i++) {
        array.push(i)
      }
 
      return array
    }
  },
  data () {
    return {
      index : this.pageIndex, //当前页码
      limit : this.pageSize, //每页显示条数
      size : this.total || 1, //总记录数
      showPrevMore : false,
      showNextMore : false
    }
  },
  watch : {
    pageIndex(val) {
      this.index = val || 1
    },
    pageSize(val) {
      this.limit = val || 10
    },
    total(val) {
      this.size = val || 1
    }
  }
}

登入後複製

父組件中使用

<template>
  <p class="list">
    <template v-if="count">
      <ul>
        <li v-for="item in items">...</li>
      </ul>
      <mo-paging :page-index="currentPage" :totla="count" :page-size="pageSize" @change="pageChange">
      </mo-paging>
    </template>
  </p>
</template>
<script>
  import MoPaging from './paging'
  export default {
    //显示的声明组件
    components : {
      MoPaging 
    },
    data () {
      return {
        pageSize : 20 , //每页显示20条数据
        currentPage : 1, //当前页码
        count : 0, //总记录数
        items : []
      }
    },
    methods : {
      //获取数据
      getList () {
        //模拟
        let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
        this.$http.get(url)
        .then(({body}) => {
 
          //子组件监听到count变化会自动更新DOM
          this.count = body.count
          this.items = body.list
        })
      },
 
      //从page组件传递过来的当前page
      pageChange (page) {
        this.currentPage = page
        this.getList()
      }
    },
    mounted() {
      //请求第一页数据
      this.getList()
    } 
  }
</script>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！