element-ui配合vue分頁(yè)

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

摘要：就可以在頁(yè)面展示了。當(dāng)然這不是一個(gè)好方法，好方法應(yīng)該是點(diǎn)擊頁(yè)數(shù)發(fā)送請(qǐng)求呀。我還沒(méi)想起來(lái)怎么寫(xiě)，我后臺(tái)就一個(gè)數(shù)組應(yīng)該怎么拆分呢。

想了好久才想明白分頁(yè)的問(wèn)題，不過(guò)現(xiàn)在還有問(wèn)題，就是在v-for 循環(huán)的時(shí)候分頁(yè)的，數(shù)據(jù)一次都請(qǐng)求過(guò)來(lái)了?。?br>上代碼核心代碼就是一句

vue：

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

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

GPU云服務(wù)器云服務(wù)器 Vue實(shí)現(xiàn)分頁(yè) element-ui element-ui dialog組件 python 配合

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100340.html

相關(guān)文章

VUE UI框架對(duì)比 element-ui 與 iView

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

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

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

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

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

Freeman 2019-08-26 10:49 評(píng)論0 收藏0
開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 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 評(píng)論0 收藏0
開(kāi)發(fā)中遇到的問(wèn)題總結(jié)

摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 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 評(píng)論0 收藏0