vue project realizes paging effect

vue project to achieve paging effect, for your reference, the specific content is as follows

1. Here we use element-ui to implement it, and first use npm to install it

npm i element-ui -S

2. Global introduction in main. js

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

Vue.use(ElementUI) // Will element-ui Hang to global 

3. Package the components

<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"], // Total number of articles passed in, and page number 
 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. Introduce components and use the

<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"; // Introducing paging components 
export default {
 data() {
 return {
  page:"", // Current page number 
  num: 1, // Total number of contents 
 };
 },
 methods: {
 list() {
  // Sent http Request  
  // The total number of pages returned by the backend is equal to num
 },
 },
 mounted() {
 this.news();
 },
 components: {
 ATablePaging
 }
};
</script>

<style scoped>
</style>

For the learning tutorial of vue. js, please click on the special vue. js component learning tutorial and Vue. js front-end component learning tutorial to learn.