" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一篇文章告訴你如何實(shí)現(xiàn)Vue前端分頁(yè)和后端分頁(yè)

 更新時(shí)間:2021年12月31日 17:08:37   作者:lxslxskxs  
這篇文章主要為大家介紹了如何實(shí)現(xiàn)Vue前端分頁(yè)和后端分頁(yè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

1:前端手寫分頁(yè)(數(shù)據(jù)量小的情況下)

前端需要使用slice截?。?tableData((page-1)pageSize,pagepageSize)

clipboard.png

clipboard1.png

2:后端分頁(yè),前端只需要關(guān)注傳遞的page和pageSize

3:前端手寫分頁(yè)按鈕

<body>
  <div id="app">
    <table class="table table-bordered table-condensed">
      <tr class="bg-primary">
        <th class="text-center">排序</th>
        <th class="text-center">用戶姓名</th>
        <th class="text-center">用戶性別</th>
        <th class="text-center">所在城市</th>
      </tr>
      <tr class="text-center active"  v-for="(v,i) in list" :key="i">
        <td>{{num(i)}}</td>
        <!-- <td>{{params.pagesize}}</td> -->
        <td>{{v.name}}</td>
        <td>{{v.sex}}</td>
        <td>{{v.addr}}</td>
      </tr>       
    </table>
    <nav aria-label="Page navigation" style="text-align: center;">
      <ul class="pagination">
        <!-- 上一頁(yè) -->
        <li @click="prePage()" :class="{'disabled':params.page == 1}">
          <a aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)">
          <a  style="cursor: pointer;">
            {{page}}
          </a>
        </li>
        <!-- 下一頁(yè) -->
        <li :class="{'disabled':params.page == totalPage}" @click="next()">
          <a aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</body>
window.onload = function () {
  // 1s內(nèi)只允許發(fā)送請(qǐng)求(出發(fā)事件)一次(可多次點(diǎn)擊) 節(jié)流 throttle
  new Vue({
    el: '#app',
    data: {
      params:{
        page:1,
        pagesize:20,
        name:''
      },
      list: [],
      total:0,//總的條數(shù)
      totalPage:0,//總的頁(yè)數(shù)
      flag: false,
    },
    created() {
      this.getData()
    },
    computed: {
      pages() {
        let totalPage = this.totalPage;
        let page = this.params.page;
        // 總的頁(yè)數(shù)小于10頁(yè)
        if(totalPage < 10) return totalPage;
        // 總的頁(yè)數(shù)大于10頁(yè)添加省略號(hào)
        if(page <= 5) { // 前五頁(yè)
          // (1) 頁(yè)碼小于5 左邊顯示六個(gè)
          return [1,2,3,4,5,6,'...',totalPage]
        } else if (page >= totalPage - 5) { // 后五頁(yè)
          console.log("觸發(fā)")
          // (2) 頁(yè)碼大于總頁(yè)數(shù)-5 右邊顯示六個(gè)
          return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage]
        } else { // 中間五頁(yè)
          // (3)頁(yè)碼在 5-(totalPage-5)之間 左邊區(qū)間不能小于5  右邊區(qū)間不能大于總頁(yè)數(shù)totalPage,注意  左邊的當(dāng)前頁(yè)-num 不能小于1, 右邊的當(dāng)前頁(yè)+num不能大于總頁(yè)數(shù)
          return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage]
        }
      },
      num() {
        let { pagesize, page} = this.params
        // (1-1) * 10 + 10 + 0 + 1 = 1;
        // (2-1) * 10 + 10 + 0 + 1 = 11 
        // 第一頁(yè) = (當(dāng)前頁(yè) -1 )* 每頁(yè)的條數(shù) + 索引值 + 1 保證是從1開始的
        return i => (page - 1) * pagesize + i + 1  // (當(dāng)前頁(yè)- 1 * 每頁(yè)的條數(shù)) + 索引值 + 1
      }
    },
    methods: {
      getData() {
        if(this.flag) return;
        this.flag = true;
        // 下面就是相當(dāng)于一個(gè)定時(shí)器
        axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => {
          console.log('res',res.data.users)
          let { total,users } = res.data.users;
          this.total = total;
          this.totalPage = Math.ceil( this.total / this.params.pagesize);
          this.list = users
          this.flag = false;
        })
      },
      curPage(page) {
        if(page == '...') return 
        if(this.flag) return;
        this.params.page = page;
        this.getData()
      },
      prePage() {
        // if(this.params.page == '...') return 
        if(this.params.page > 1) {
          if(this.flag) return;
          --this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
      next() {
        // if(this.params.page == '...') return 
        if(this.flag) return;
        console.log("執(zhí)行",this.totalPage)
        if(this.params.page < this.totalPage) {
          ++this.params.page;
          console.log('page',this.params.page)
          this.getData()
        }
      },
     } 
  })
}

image.png

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • Vue全局自定義指令Modal拖拽的實(shí)踐

    Vue全局自定義指令Modal拖拽的實(shí)踐

    最近一直在做的項(xiàng)目是Vue2搭建的項(xiàng)目,本文主要介紹了Vue全局自定義指令Modal拖拽的實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue中禁止編輯的常見方法(以禁止編輯輸入框?yàn)槔?

    Vue中禁止編輯的常見方法(以禁止編輯輸入框?yàn)槔?

    在我們開發(fā)項(xiàng)目的時(shí)候,有時(shí)候我們不希望用戶對(duì)我們的頁(yè)面進(jìn)行操作,尤其是輸入框之類的,這篇文章主要給大家介紹了Vue中禁止編輯的常見方法,文中介紹的方法主要以禁止編輯輸入框?yàn)槔?需要的朋友可以參考下
    2024-02-02
  • 詳解vite如何支持cjs方案示例

    詳解vite如何支持cjs方案示例

    這篇文章主要介紹了vite如何支持cjs方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解

    vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解

    默認(rèn)插槽,具名插槽,作用域插槽是vue中常用的三個(gè)插槽,這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別,感興趣的小伙伴可以了解一下
    2023-08-08
  • vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變

    vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變

    這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • VUE的數(shù)據(jù)代理與事件詳解

    VUE的數(shù)據(jù)代理與事件詳解

    這篇文章主要為大家介紹了VUE的數(shù)據(jù)代理與事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • Vue.js源碼分析之自定義指令詳解

    Vue.js源碼分析之自定義指令詳解

    這篇文章主要給大家介紹了關(guān)于Vue.js源碼分析之自定義指令的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽

    vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽

    這篇文章主要介紹了vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中使用js-cookie詳情

    Vue中使用js-cookie詳情

    這篇文章主要介紹了Vue中使用js-cookie詳情,文章圍繞js-cookie的相關(guān)資料展開詳細(xì)內(nèi)容具有一定的的參考價(jià)值,需要的小伙伴可以參考一下
    2022-03-03
  • vue通過點(diǎn)擊事件讀取音頻文件的方法

    vue通過點(diǎn)擊事件讀取音頻文件的方法

    最近做項(xiàng)目遇到這樣的一個(gè)需求,通過select元素來(lái)選擇音頻文件的名稱,點(diǎn)擊按鈕可以進(jìn)行試聽。接下來(lái)通過本文給大家介紹vue項(xiàng)目中通過點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下
    2018-05-05

最新評(píng)論