vue項(xiàng)目實(shí)現(xiàn)分頁效果

更新時(shí)間：2021年03月18日 14:55:16 作者：程序猿余某人

這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue項(xiàng)目中實(shí)現(xiàn)分頁效果，供大家參考，具體內(nèi)容如下

1.這里我們使用element-ui來實(shí)現(xiàn)，先使用npm安裝

npm i element-ui -S

2.在main.js中全局引入

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI) //將element-ui掛在到全局

3.封裝組件

<template>
 <div class="block">
 <el-pagination
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-size="6"    
  layout="prev, pager, next, jumper"
  :total="total"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</template>

<script>
export default {
 props: ["num", "page"], //傳入的總條數(shù)，和頁碼
 data() {
 return {};
 },
 computed: {
 currentPage: function() {
  return this.page;
 },
 total: function() {
  return this.num;
 }
 },
 methods: {
 handleSizeChange(val) {
  this.$emit("size-change", val);
 },
 handleCurrentChange(val) {
  this.$emit("current-change", val);
 }
 }
};
</script>

<style>
.block {
 text-align: right;
 /* width: 100%; */
}
</style>

4.引入組件并使用

<template>
 <div class="mobild">
  <div>
  <ATablePaging
   :num="num"
   :page="page"
   @current-change="(val) => { 
   page = val;
   list();
   }"
  ></ATablePaging>
  </div>
 </div>
</template>

<script>
import ATablePaging from "../paging"; //引入分頁組件
export default {
 data() {
 return {
  page:"", //當(dāng)前頁碼
  num: 1, //內(nèi)容總條數(shù)
 };
 },
 methods: {
 list() {
  //發(fā)送的http請(qǐng)求 
  //后端返回的總頁數(shù)等于num
 },
 },
 mounted() {
 this.news();
 },
 components: {
 ATablePaging
 }
};
</script>

<style scoped>
</style>

關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
分頁

相關(guān)文章

Vue內(nèi)容分發(fā)slot(全面解析)
下面小編就為大家?guī)硪黄猇ue內(nèi)容分發(fā)slot(全面解析)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
vue項(xiàng)目之頁面class不生效問題及解決
這篇文章主要介紹了vue項(xiàng)目之頁面class不生效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue中的計(jì)算屬性和axios基本使用回顧
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue中引入svg圖標(biāo)的兩種方式
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
一篇文章帶你了解vue路由
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，比如說我們?cè)趗rl地址中輸入我們要訪問的url地址之后，瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源，本文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于攔截對(duì)象的基本操作,包括屬性讀?。╣et）、修改（set）、刪除（deleteProperty）等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下
2025-03-03
淺談vue2的$refs在vue3組合式API中的替代方法
這篇文章主要介紹了淺談vue2的$refs在vue3組合式API中的替代方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
vue實(shí)現(xiàn)登錄功能
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
詳解Vue結(jié)合后臺(tái)的列表增刪改案例
這篇文章主要介紹了詳解Vue結(jié)合后臺(tái)的增刪改案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)面包屑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04