vue+element-ui的分頁問題實現(xiàn)-創(chuàng)新互聯(lián)

背景介紹

創(chuàng)新互聯(lián)專注于宣漢網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供宣漢營銷型網(wǎng)站建設(shè)，宣漢網(wǎng)站制作、宣漢網(wǎng)頁設(shè)計、宣漢網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造宣漢網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供宣漢網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

最近比較空閑，公司的后臺就想著把現(xiàn)在的后臺管理系統(tǒng)給改版一下，說是以前的太難看了，用著也不好用，然后給我甩過來一個ant-design-pro的鏈接，說是他看這個就挺不錯的。

我當(dāng)時心里就想著，之前的那個項目混合在你們的java項目里，跟普通的jsp頁面差不多，一下就是一大堆的css和js文件，看著我都害怕（好吧，我承認(rèn)其實我都不敢看），這能加載的快了就奇了怪了。ant-design最初是為react設(shè)計的，ant-design-pro自然也是用react了，不得不說人家這個界面看著確實舒服。

對著ant-design-pro的官方文檔看了一通，貌似看了跟沒看也差不多？？？算了，還是直接看代碼吧，整理了一下思路，大致上是看懂了，除了react + react-router外，狀態(tài)管理用的是 dva, redux的異步問題算是解決了，要不就開始直接寫頁面吧？

等等，我好像漏掉了點什么？噢，對，先看看打包出來的文件大小，一打包我的心就涼了，大的js居然有900多k，ant-design的源文件是真的大。react我還只是能寫出代碼，打包優(yōu)化這個可就有點為難我了。這時的我再想到公司那1m的帶寬，還有這幾個后臺的技術(shù)能力，要不然這個技術(shù)棧我還是放棄吧？不能指望連 請求頭, CORS稍微高級一點的攜帶cookie, nginx靜態(tài)服務(wù)器 都搞不懂的人去給我弄個靜態(tài)服務(wù)器，再順便開啟一下gzip吧？算了算了，找找有沒有vue + element-ui的后臺模板，不用太費勁就找到了 vue-element-admin 。

vue-element-admin用著還行，就是界面不太符合我的理想情況，就對著ant-design-pro改造了一點，列表頁大概就是下面這樣了。列表的數(shù)據(jù)是要分頁的，普通的列表頁只有一個頁面棧，也就是用戶點擊地址欄的回退地址欄時，會返回上一個頁面棧，而不是上一頁的數(shù)據(jù)，不太符合用戶習(xí)慣吧?畢竟傳統(tǒng)的網(wǎng)站都是可以回退到上一頁的，嗯，話不多說，進(jìn)入正題吧。

第一步：改變地址欄

假設(shè)列表頁的路徑是 /user/list，分頁相關(guān)的參數(shù)為 { page: 1, pagesize: 10 } ,從其他頁面跳轉(zhuǎn)過來的時候，我們的路徑通常是不包含任何參數(shù)的，之后的列表數(shù)據(jù)都是根據(jù)該頁面的page和pagesize進(jìn)行變化的，當(dāng)未使用keep-alive緩存組件時，每次進(jìn)入列表頁都相當(dāng)于第一次進(jìn)入，也就是說每次都只能獲取第一頁的數(shù)據(jù)。

既然列表數(shù)據(jù)是用page和pagesize進(jìn)行變化的，那直接從地址欄獲取page和pagesize進(jìn)行賦值不就好了？那么是改變地址欄的代碼是直接寫在當(dāng)前頁面還是 獨立為分頁組件 呢？從復(fù)用性方面來說，還是獨立出來的好，畢竟其他頁面可能也會使用到，總不能每次都復(fù)制粘貼吧，那組件化的意義何在？當(dāng)然了，也不是說分頁就必須用這個自定義的分頁組件，只推薦在 主頁面（非遮罩層 ，有的頁面會在點擊某一行數(shù)據(jù)時出現(xiàn)遮罩層顯示子列表，此時使用element-ui的分頁組件即可）需要分頁時使用。

當(dāng)改變地址欄的時候，我們是不希望不帶分頁參數(shù)的頁面棧存在的，此時用replace直接替換即可。

MyPagination.vue的初始結(jié)構(gòu)為:

<template>
 <div class = " flex all-center">
 <template v-if="total > 0">
  <el-pagination
  :page-size="pagesize"
  :total="total"
  :current-page="page"
  background
  layout="prev, pager, next, jumper, total"
  class="my-pagination"
  @current-change="changePage" />
 </template>
 </div>
</template>

<script>
export default {
 name: 'MyPagination',
 props: {
 total: {
  type: Number,
  default: 0,
 },
 page: {
  type: Number,
  default: 1,
 },
 pagesize: {
  type: Number,
  default: 10,
 },
 totalPages: {
  type: Number,
  default: 1,
 },
 },
 created() {
 this.getCurrentPage();
 },
 methods: {
 changePage(val) {
  this.handlePage('push', val, this.pagesize);
  this.$emit('change', val, this.pagesize);
 },
 getCurrentPage() {
  var { page, pagesize } = this.$route.query;
  if (!page || !pagesize) {
  this.handlePage('replace', page || 1, +pagesize || this.pagesize);
  return true;
  }
  return false;
 },
 handlePage(type, page, pagesize) {
  this.$router[type]({
  path: this.$route.path,
  query: { ...this.$route.query, page, pagesize },
  });
 }
 },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-pagination {
 padding-top: 24px; 
}
</style>

網(wǎng)頁標(biāo)題：vue+element-ui的分頁問題實現(xiàn)-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article4/dchhie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航、全網(wǎng)營銷推廣、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容