vue实现分页组件

父组件

<template>
  <div>
      <div class="log-bottom">
        <Pager
          ref="pager"
          :pageSize="pageSize"
          :curPage="curPage"
          :total="total"
          @setPage="gotoPage"
          @setRowNum="changeRowNum"
        />
      </div>
  </div>
</template>

<script>
import Pager from "page/pagesButton";
export default {
  data() {
    return {
      curPage: 1, //当前页
      total: "", //总共页数
      pageSize: 10, //每页记录数
    };
  },
  components: {
    Pager
  },
  methods: {
    initPage(page) {
      let url =  `http://10.1.0.117:5000/admin/log/index?page=${page}&pagesize=${this.pageSize}`;
      this.$axios.get(url).then(res => {
        this.log_list = res.data.data.logs;
        this.total = res.data.data.pagecount;
        console.log(res);
      });
    },
    gotoPage(page) {
      this.initPage(page)
      console.log(page);
    },
  },
  created() {
    this.initPage();
  }
};
</script>

分页组件，引入即可使用

<template>
  <div class="pager">
    <span v-if="showNextPage">共计{{totals}}条记录</span>
    <span v-if="showNextPage">共{{Page}}/{{ Math.ceil(totals/rowNum)}}页</span>
    <a href="javascript:void(0);" v-if="showFirstPage" @click="firstPage">首页</a>
    <a href="javascript:void(0);" v-if="showPrevPage" @click="prevPage">上一页</a>
    <a href="javascript:void(0);" v-if="showNextPage" @click="nextPage">下一页</a>
    <a href="javascript:void(0);" v-if="showLastPage" @click="lastPage">尾页</a>
    <div class="goto">
      <input type="text" v-model="gotoPage" />
      <a href="javascript:void(0);" @click="gotoNextPage">跳转</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "Pager",
  props: ["pageSize", "curPage", "total"],
  data() {
    return {
      Page: this.curPage,
      totals: this.total,
      gotoPage: "",
      showFirstPage: true,
      showLastPage: true,
      showPrevPage: true,
      showNextPage: true,
      rowNum: this.pageSize
    };
  },
  methods: {
    nextPage() {
      //下一页
      if (this.Page <= this.totals / this.rowNum) {
        this.$emit("setPage", this.Page++ + 1); //调用父组件方法
        console.log(this.Page, "+++");
      }
    },
    prevPage() {
      //上一页
      if (this.Page >= 2) {
        this.$emit("setPage", this.Page-- - 1); //调用父组件方法
        console.log(this.Page, "-----");
      }
    },
    gotoNextPage() {
      //跳转页面
      if (this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)) {
        var pg = parseInt(this.gotoPage);
        if (pg <= Math.ceil(this.totals / this.rowNum) && pg > 0) {
          this.$emit("setPage", pg); //调用父组件方法
          this.Page = this.gotoPage;
        } else {
          this.gotoPage = "";
        }
      } else {
        this.gotoPage = "";
      }
    },
    firstPage() {
      this.Page = 1;
      this.$emit("setPage", 1); //调用父组件方法
    },
    lastPage() {
      this.Page = Math.ceil(this.totals / this.rowNum);
      this.$emit("setPage", this.Page); //调用父组件方法
    },
    initPager() {
      //不想写了，根据需求渲染dom
      this.showNextPage = true;
      this.showNextPage = true;
    }
  },
  watch: {
    //监控rowNum
    total(a, b) {
      if (a != "") {
        this.totals = a;
      }
    },
    curPage(a, b) {
      if (a != "") {
        this.Page = a;
      }
    },
    pageSize(a, b) {
      if (a != "") {
        this.rowNum = a;
      }
    }
  }
};
</script>
<style scoped>
.pager > span,
.pager > a,
.pager > select,
.pager > div {
  float: left;
  margin-left: 10px;
  font-size: 1.5vh;
  color: #7792ad;
}

.pager {
  width: 600px;
  margin: 0 auto;
  margin-top: 10px;
  height: 48px;
  /* background: #888; */
  line-height: 48px;
  margin-bottom: 40px;
}

.pager input,
.pager select {
  height: 40px;
  line-height: 40px;
  outline: none;
  border: 1px solid #888;
  padding: 10px;
  box-sizing: border-box;
}
.pager input {
  height: 20px;
  width: 20px;
 padding: 0;
  margin-right:10px; 
}
.pager .goto {
  margin-left: 10px;
}
.pager a {
  color: #7792ad;
  font-weight: bold;
  text-decoration: none;
}
.pager a:hover {
  color: skyblue;
}
</style>

完结撒花！！！！！！