vue常用分页器

一时失言乱红尘 2023-02-21 02:29 10阅读 0赞

vue-pagination-2使用，看代码：

<template>
      <div class="news-content">
        <ul class="news-item">
          
          <li v-for="list in newsItem" :key="list.id">
            <span>{ {  list.title }}</span>
          </li>
        </ul>
        <div class="pagination-box">
          <pagination
            v-model="page"
            :records="records"
            :per-page="1"
            @paginate="myCallback"
          ></pagination>
        </div>
      </div>
    </template>
    
    <script>
    import http from '../../src/utils/http';
    import Pagination from 'vue-pagination-2';
    export default { 
      name: 'News',
      data() { 
        return { 
          page: 1,
          page_size: 5,
          records: 1,
          newsItem: [],
        };
      },
      components: { 
        Pagination,
      },
      mounted() { 
        this.getNews();
      },
      methods: { 
        // 调用接口获取数据
        getNews() { 
          http
            .get('接口地址', { 
              page: this.page,
              page_size: this.page_size,
            })
            .then(data => { 
              if (data.success) { 
                this.newsItem = $data.list; //获取数据
                this.records = Math.ceil($data.total / this.page_size); //总页数
              }
            });
        },
        myCallback(page) { 
          //点击页码的时候获取当前页
          this.page = page;
          this.getNews();
        },
      },
    };
    </script>

**分页参数说明：**

1.  `records` 是总数，这个参数是必须的。
2.  `per-page` 每页显示数目 ，这个可选，默认是25个
3.  `page` 这个是初始页面，默认是第一页
4.  `options` 这个是选项，里面可以包含一些其他参数 `chunk` 最大页数 也就是最多显示多少页 默认显示10页  
    `edgeNavigation` 显示第一页和最后一页的链接 默认false 不显示 `theme`  
    主题，用来支持一些`css`样式，值可以是`bootstrap3`，`bootstrap4`等等，默认`bootstrap3`
5.  `paginate` 可以调用自定义事件。可以在组件上收听并运行您的回调。他会回传一个参数page，为当前页码。可以利用这个参数来进行列表内容的更新。