vue項目實現(xiàn)分頁效果
更新時間：2021年03月18日 14:55:16 作者：程序猿余某人
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue項目中實現(xiàn)分頁效果，供大家參考，具體內(nèi)容如下
1.這里我們使用element-ui來實現(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請求
//后端返回的總頁數(shù)等于num
},
},
mounted() {
this.news();
},
components: {
ATablePaging
}
};
</script>
<style scoped>
</style>
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄猇ue內(nèi)容分發(fā)slot(全面解析)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue項目之頁面class不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對應(yīng)關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應(yīng)的資源，本文具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于 攔截對象的基本操作,包括 屬性讀?。╣et）、修改（set）、刪除（deleteProperty） 等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了淺談vue2的$refs在vue3組合式API中的替代方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了詳解Vue結(jié)合后臺的增刪改案例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue+elementUI實現(xiàn)動態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實現(xiàn)動態(tài)面包屑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04