element-ui配合vue分頁

zhjx922 發(fā)布于2019-08-23 14:15 / 2748人閱讀

摘要：就可以在頁面展示了。當(dāng)然這不是一個好方法，好方法應(yīng)該是點擊頁數(shù)發(fā)送請求呀。我還沒想起來怎么寫，我后臺就一個數(shù)組應(yīng)該怎么拆分呢。

想了好久才想明白分頁的問題，不過現(xiàn)在還有問題，就是在v-for 循環(huán)的時候分頁的，數(shù)據(jù)一次都請求過來了！！
上代碼核心代碼就是一句

vue：

 data () {
    return {
      currentPage1: 1,
      total: 0,
      pageSize: 6,
      data: []
    }
  methods: {
    handleSizeChange (val) {
      // this.pageSize = val
      console.log(`每頁 ${val} 條`);
    },
    handleCurrentChange (val) {
      this.currentPage1 = val;
      console.log(`當(dāng)前頁: ${val}`);
    }

主要是從后臺請求回來數(shù)據(jù)是一個數(shù)組，用slice按照當(dāng)前頁面x每頁的數(shù)量得把返回的數(shù)據(jù)進行分割。
就可以在頁面展示了。當(dāng)然這不是一個好方法，好方法應(yīng)該是點擊頁數(shù)發(fā)送ajax請求呀。我還沒想起來怎么寫，我后臺就一個data數(shù)組應(yīng)該怎么拆分呢。吼吼吼。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100340.html

相關(guān)文章

VUE UI框架對比 element-ui 與 iView

摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時，使用的是的函數(shù)，直接在中插入對應(yīng)模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項目UI框架在選型，做了個分析，不帶有任何利益相關(guān)）主要從以下幾個方面來做對比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計師友...

ZHAO_ 2019-08-20 17:25 評論0 收藏0
關(guān)于vue+element-ui項目的分頁，返回默認顯示第一頁的問題解決

摘要：所以這就導(dǎo)致，頁面內(nèi)容正確，但是頁碼高亮依舊是第一頁解決辦法我們需要在之后刷新這個分頁組件或者讓分頁組件的后于之后加載到頁面。然后再次測試，發(fā)現(xiàn)完美解決問題。問題描述當(dāng)前頁面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后點擊頁碼跳到第3頁，然后在第三頁點擊頁面鏈接跳轉(zhuǎn)到新的頁面showImg(https://segmentfa...

YFan 2019-08-26 13:22 評論0 收藏0
使用nuxt開發(fā)博客后臺管理系統(tǒng)（一）element ui的使用

摘要：進入主題使用我們在創(chuàng)建項目時已經(jīng)選擇安裝了，安裝完就能使用了。注：文章中的nuxt為2.0.0版本眾所周知vue單頁面應(yīng)用的seo很不友好，每次打開頁面先獲取的節(jié)點也就是一個,而這對想用vue做spa又想擁有友好搜索引擎seo優(yōu)化的人來說就好比雞肋。好在vue的官方出了nuxt，既能讓我們使用spa又能擁有良好的搜索引擎優(yōu)化；nuxt介紹->https://zh.nuxtjs.or...

Freeman 2019-08-26 10:49 評論0 收藏0
開發(fā)中遇到的問題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 評論0 收藏0
開發(fā)中遇到的問題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 評論0 收藏0