vue專案中實現分頁效果，供大家參考，具體內容如下

1.這裡我們使用element-ui來實現，先使用npm安裝

npm pOZeANTi element-ui -S

2.在main.js中全域性引入

import ElementUI from "element-ui"
importpOZeANT '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",pOZeANT
 
"page"],//傳入的總條數，和頁碼
 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%; */
}
</stylwww.cppcns.com
 
e>

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:"",//當前頁碼
  num: 1,//內容總條數
 };
 },methods: {
 list() {
  //傳送的http請求 
  //後端返回的總頁數等於num
 },},mounted() {
 this.news();
 },components: {
 ATablePaging
 }
};
</script>

<style scoped>
</style>

關於vue.js的學習教程，請大家點選專題vue.js元件學習教程、Vue.js前端元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有程式設計客棧所幫助，也希望大家多多支援我們。