vue项目实现分页效果

vue项目中实现分页效果，供大家参考，具体内容如下

1.这里我们使用element-ui来实现，先使用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"], //传入的总条数，和页码 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:"", //当前页码  num: 1, //内容总条数 }
    ;
 }
, methods: {
 list() {
  //发送的http请求   //后端返回的总页数等于num }
, }
, mounted() {
     this.news();
 }
, components: {
 ATablePaging }
}
    ;
    /script>
    style scoped>
    /style>
    

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue form 表单提交+ajax异步请求+分页效果
• Vue.js实现分页查询功能
• 用Vue写一个分页器的示例代码
• Vue.js实现无限加载与分页功能开发
• vue.js表格分页示例
• VUE+SpringBoot实现分页功能
• Vue组件库ElementUI实现表格列表分页效果
• Vue中ElementUI分页组件Pagination的使用方法
• vue+iview实现分页及查询功能
• vue+iview分页组件的封装
• vue实现分页功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！