前言

需要具備父子組件通信的知識 不知道的可以看我的筆記了解--里面的第26绣夺、27條

• 多頁面結構截圖

image.png

• 效果 gif 圖

Animation47.gif

正文

分頁組件源碼

1. 新建分頁 .vue 文件 src -> components -> pagination -> index.vue，編輯 index.vue 文件

<template>
<div>
    <!-- 分頁 -->
    <nav aria-label="Page navigation" class="text-center">
        <ul class="pagination">
            <li  @click="previousGo">
              <a href="javascript:void(0);" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
                        <li v-for="(page,index) in pages" :key="index" @click="pageGo(page)" :class="{ 'active' : page === pageNumber}">
                            <a href="javascript:void(0);">{{ page }}</a>
                        </li>
            <li @click="nextGo">
              <a href="javascript:void(0);" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
        </ul>
    </nav>
</div>
</template>

<script>
// import qs from 'qs' // 解決 axios 數(shù)據(jù)提交格式與后臺不一致的問題  -> name=hehe&age=10
export default {
  props: ['parentPageData'], // 父組件數(shù)據(jù) 別名
  name: 'Pagination',
  data() {
    return {
      // 當前頁碼
      pageNumber: null,
      // 分頁展示數(shù)量
      pageSize: null,
      // 數(shù)據(jù)總數(shù)量
      totalRow: null,
      // 頁碼數(shù)組
      pages: []
    }
  },
  watch: {
    // 監(jiān)聽父組件數(shù)據(jù)變化實時更新數(shù)據(jù)
    parentPageData: {
      handler: 'loadPageList',
      immediate: true
    }
  },
  methods: {
    // 轉換數(shù)據(jù)
    transformPageData: function() {
      const me = this
      const pagePlugin = me.$parent.$data.pagePlugin
      // console.log(pagePlugin)
      me.pageNumber = pagePlugin.pageNumber
      me.pageSize = pagePlugin.pageSize
      me.totalRow = pagePlugin.totalRow
    },
    // 加載頁面數(shù)據(jù)
    loadPageList: function() {
      // 頁碼數(shù)組
      const me = this
      me.transformPageData()
      let _length = me.pageSize // 每頁數(shù)量 & 頁碼列表總長度
      let _page = me.pageNumber // 當前頁面
      let _max = Math.ceil(me.totalRow / _length) // 最多的頁碼數(shù)字
      // console.log(_length + ' ' + _page + ' ' + _max)

      // 不是首次請求頁碼操作
      // 增加：判斷頁面長度是否為  頁碼列表總長度 修復 bug唯竹，bug 說明：如果當前搜索成功之后乐导，但是頁碼數(shù)量少于 頁碼列表總長度 ，比如兩頁浸颓，之后將搜索框內(nèi)容手動刪除物臂，再點擊分頁會出現(xiàn)請求到的數(shù)據(jù)已更新為全部，但是分頁列表數(shù)組 length 還是 2 導致的 bug
      if (_page !== 1 && me.pages.length === _length) {
        if (_page === me.pages[0]) {
          // 當前頁碼數(shù)是數(shù)組中的第一個頁碼
          me.pages.pop() // 刪除數(shù)組中最后一個元素
          me.pages.unshift(me.pageNumber - 1) // 向第一個元素前面追加一個元素
          return false
        } else if (_page === me.pages[me.pages.length - 1] && _page !== _max) {
          // 當前頁碼數(shù)是數(shù)組中的最后一個頁碼 且這個值不是總頁碼的最后一頁
          me.pages.shift() // 刪除數(shù)組中第一個元素
          me.pages.push(me.pageNumber + 1) // 向末尾增加一個元素
          return false
        } else if (me.pages.indexOf(_page) > -1) {
          // 當前的頁碼數(shù)存在于當前的頁碼數(shù)組中 不會向下重新拼接數(shù)組
          return false
        }
      }
      // 拼接頁碼操作
      let arr = []
      // 如果總頁碼不足 10 頁 循環(huán)次數(shù)為頁碼數(shù)
      if (_max < 10) _length = _max
      // 當前頁面已經(jīng)是最后一頁 倒數(shù)排列
      if (_page >= _max) {
        while (_length--) {
          arr.push(_page--)
        }
        arr.reverse()
      } else {
        while (_length--) {
          arr.push(_page++)
        }
      }
      me.pages = arr
    },
    // 分頁點擊
    pageGo: function(number) {
      const me = this
      // 點擊的是當前頁碼 return
      if (me.pageNumber === number) return
      me.$parent.$data.pagePostData.page_number = number
      me.pageNumber = number
      // 調用父組件方法
      me.$emit('updatePageData')
      // me.transformPageData()
      // me.loadPageList()
    },
    // 上一頁點擊
    previousGo: function() {
      const me = this
      // 當前頁碼為 1 return
      if (me.pageNumber === 1) {
        return false
      } else {
        me.pageGo(me.pageNumber - 1)
      }
    },
    // 下一頁點擊
    nextGo: function() {
      const me = this
      // 當前頁碼為 最后一頁 return
      if (me.pageNumber * me.pageSize >= me.totalRow) {
        return false
      } else {
        me.pageGo(me.pageNumber + 1)
      }
    }
  }
}
</script>

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

2. 父組件相應的使用示例产上，多余的源碼已刪除

<template>
  <div class="container row">
    <div class="col-sm-10">
      <div class="row">
        <form class="navbar-form navbar-left col-sm-5" @submit.prevent="searchForm">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="搜索" v-model="pagePostData.seach_name_phone">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <div class="col-sm-7 text-right mtb-8">
          <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="下載示例文件及相關操作">下載示例</button>
          <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="">導出</button>
          <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="" @click="openFilePopup">導入</button>
          <a href="addstaff.html" class="btn btn-link">新建成員</a>
          <a href="quitlist.html" class="btn btn-link">離職員工</a>
        </div>
      </div>
      <table class="table table-bordered">
        <caption>成員列表</caption>
        <thead>
          <tr>
            <th>&nbsp;&nbsp;</th>
            <th>姓名</th>
            <th>部門</th>
            <th>職位</th>
            <th>電話</th>
            <th>套餐</th>
            <th>授信額度</th>
            <th>狀態(tài)</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(people,index) in pageGetData" :key="people.id">
            <td>
              <div class="custom-control custom-checkbox">
                <input class="form-check-input" type="checkbox" :id="'inlineCheckbox' + index">
              </div>
            </td>
            <td>{{ people.name }}</td>
            <td>{{ people.department }}</td>
            <td>{{ people.position }}</td>
            <td>{{ people.phone_number }}</td>
            <td>{{ people.package_code }}</td>
            <td>{{ people.balance }}</td>
            <td>{{ people.IS_USED }}</td>
            <td>
              <span>修改</span>
              <span>禁用</span>
              <span>移動</span>
              <span role="button" @click="leaveGo" :data-number="people.phone_number">離職</span>
              <span>詳情</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="data-none" v-show="pageGetData.length === 0">暫無數(shù)據(jù)</div>
      <!-- 分頁 -->
      <pagination @updatePageData="loadPageData"  :parentPageData="pageGetData" v-show="pageGetData.length > 0"></pagination>
    </div>
    <!-- 彈窗 -->
    <msg-modal :modal-msg="modalMsg"></msg-modal>
  </div>
</template>

<script>
import qs from 'qs' // 解決 axios 數(shù)據(jù)提交格式與后臺不一致的問題  -> name=hehe&age=10
import MsgModal from '@/components/msgmodal'
import Pagination from '@/components/pagination'

export default {
  name: 'App',
  components: { MsgModal, Pagination },
  data() {
    return {
      // 彈窗信息 在執(zhí)行操作時使用
      modalMsg: '',
      // 信息提交接口
      pagePostAPI: '/jjhServerApi/ab/getAbByCondition',
      // 信息提交數(shù)據(jù)
      pagePostData: {
        /**
         * page_number 分頁頁數(shù)  不填默認為1
         * seach_name_phone 手機號或姓名 非必填  模糊查詢傳的條件
         */
        page_number: '',
        seach_name_phone: ''
      },
      // 頁面數(shù)據(jù)
      pageGetData: [],
      // 分頁組件參數(shù)
      pagePlugin: {
        // 當前頁碼
        pageNumber: '',
        // 分頁展示數(shù)量
        pageSize: '',
        // 數(shù)據(jù)總數(shù)量
        totalRow: ''
      }
    }
  },
  mounted() {
    const me = this
    // 初始化頁面數(shù)據(jù)
    me.loadPageData()
  },
  methods: {
    // 加載頁面所需的數(shù)據(jù)
    loadPageData: function() {
      const me = this
      // console.log(qs.stringify(me.pagePostData))
      me.axios
        .post(me.pagePostAPI, qs.stringify(me.pagePostData))
        .then(response => {
          // console.log(response)
          const getData = response.data
          if (getData.code === 0) {
            me.pageGetData = getData.result.list
            me.pagePostData.page_number = getData.result.pageNumber
            // 分頁數(shù)據(jù)轉換
            me.pagePlugin.pageNumber = getData.result.pageNumber
            me.pagePlugin.pageSize = getData.result.pageSize
            me.pagePlugin.totalRow = getData.result.totalRow
          } else {
            me.openAlertModel(getData.info)
          }
        })
        .catch(error => {
          console.log(error)
          me.openAlertModel('請求服務器失敗了棵磷，請稍后重試！')
        })
    },
    // 打開彈窗
    openAlertModel: function(message) {
      const me = this
      me.modalMsg = message
      $('#myModal').modal('show')
    },
    // 搜索表單提交
    searchForm: function() {
      const me = this
      // 頁碼重置為 1
      me.pagePlugin.pageNumber = me.pagePostData.page_number = 1
      me.loadPageData()
    }
  }
}
</script>

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

• axios 掛載是在相應的 js 文件中

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.axios = axios

總結

剛開始覺得還是蠻簡單的晋涣，后來發(fā)現(xiàn)最早時候寫的 bug 很多

• 需要注意的地方(bug 產(chǎn)生的原因)：
  • 搜索后要將 "頁碼重置為 1"
  • "如果當前搜索成功之后仪媒，但是頁碼數(shù)量少于 頁碼列表總長度 ，比如兩頁谢鹊，之后將搜索框內(nèi)容手動刪除算吩，再點擊分頁會出現(xiàn)請求到的數(shù)據(jù)已更新為全部，但是分頁列表數(shù)組 length 還是 2 導致的 bug"