亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能示例

 更新時(shí)間:2021年12月07日 08:30:41   作者:學(xué)學(xué)學(xué)無(wú)止境  
本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文主要介紹了Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能,分享給大家,具體如下:

效果圖:

功能描述:

  • 顯示數(shù)據(jù)的總數(shù)目
  • 可選擇每天的顯示條數(shù)
  • 點(diǎn)擊頁(yè)碼跳轉(zhuǎn)到指定頁(yè)數(shù)
  • 輸入頁(yè)碼可跳轉(zhuǎn)到指定頁(yè)

1.功能實(shí)現(xiàn)

1.1 結(jié)構(gòu)

        <!-- 分頁(yè) -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

1.2 邏輯

    data() {
      return {
        //請(qǐng)求參數(shù)
        queryInfo: {
          type: 3,
          //當(dāng)前頁(yè)數(shù)
          pagenum: 1,
          //指定當(dāng)前頁(yè)數(shù)顯示的數(shù)目
          pagesize: 5,
        },
        goodsList: [],
        //總數(shù)據(jù)
        total: 0,
      }
    }
 
  methods: {
      //獲取商品分類數(shù)據(jù)
      async getGoodsCate() {
        const { data: res } = await this.$http.get("categories", {
          params: this.queryInfo,
        })
        if (res.meta.status !== 200) {
          this.$message.error("獲取參數(shù)失敗")
        }
        this.total = res.data.total
        this.goodsList = res.data.result
        //console.log(this.goodsList)
      },
      //監(jiān)聽(tīng)每頁(yè)的條數(shù)
      handleSizeChange(pagesize) {
        // console.log(`每頁(yè) ${val} 條`)
        this.queryInfo.pagesize = pagesize
        this.getGoodsCate()
      },
      //監(jiān)聽(tīng)當(dāng)前頁(yè)數(shù)
      handleCurrentChange(pageNum) {
        this.queryInfo.pagenum = pageNum
        this.getGoodsCate()
      },
    },

1.3 參數(shù)說(shuō)明

1.4 效果演示

到此這篇關(guān)于Vue后臺(tái)管理系統(tǒng)之實(shí)現(xiàn)分頁(yè)功能示例的文章就介紹到這了,更多相關(guān)Vue 分頁(yè) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹

    Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹

    這篇文章主要介紹了Vue過(guò)濾器,生命周期函數(shù)和vue-resource簡(jiǎn)單介紹,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2021-01-01
  • vue form 表單提交后刷新頁(yè)面的方法

    vue form 表單提交后刷新頁(yè)面的方法

    今天小編就為大家分享一篇vue form 表單提交后刷新頁(yè)面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例

    vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例

    這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • 超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏)

    超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏)

    這篇文章主要介紹了超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

    vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn)

    這篇文章主要介紹了vue-autoui自匹配webapi的UI控件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • vue2使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器

    vue2使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器

    這篇文章主要為大家詳細(xì)介紹了vue2如何使用wangeditor實(shí)現(xiàn)數(shù)學(xué)公式和富文本編輯器功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
    2023-12-12
  • vue生命周期與鉤子函數(shù)簡(jiǎn)單示例

    vue生命周期與鉤子函數(shù)簡(jiǎn)單示例

    這篇文章主要介紹了vue生命周期與鉤子函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue.js生命周期及鉤子函數(shù)相關(guān)流程與實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-03-03
  • vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開(kāi)箱即用)

    vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開(kāi)箱即用)

    這篇文章主要介紹了vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果(開(kāi)箱即用),每一個(gè)數(shù)字由七個(gè)元素構(gòu)成,即每一個(gè)segment元素,本文給大家分享實(shí)現(xiàn)實(shí)例,感興趣的朋友一起看看吧
    2019-12-12
  • vue中如何引入jest單元測(cè)試

    vue中如何引入jest單元測(cè)試

    這篇文章主要介紹了vue中如何引入jest單元測(cè)試問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • 在Vue中使用mockjs代碼實(shí)例

    在Vue中使用mockjs代碼實(shí)例

    這篇文章主要介紹了在Vue中使用mockjs代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11

最新評(píng)論