vue 分页组件_低级Vue分页组件

最新推荐文章于 2024-03-23 07:10:09 发布

cuk5340

最新推荐文章于 2024-03-23 07:10:09 发布

阅读量214

点赞数

文章标签： vue react 搜索引擎 window json ViewUI

原文链接：https://vuejsexamples.com/low-level-vue-pagination-component/

版权

vue 分页组件

网页 (vue-lpage)

Low-level Vue pagination component

低级Vue分页组件

This is a low-level, ui-agnostic pagination component.

这是一个底层的，与用户界面无关的分页组件。

You pass it an array of data, the current page index and the desired amount of results per page.

您向其传递数据数组，当前页面索引以及每页所需的结果量。

It then exposes a scoped slot through which you can access the following:

然后，它公开了一个有作用域的插槽，您可以通过该插槽访问以下内容：

subset: the subset of data corresponding to the current page.
子集：与当前页面相对应的数据子集。
totalPages: the total amount of pages.
totalPages ：页面总数。
isFirstPage: whether the current page is the first one.
isFirstPage ：当前页面是否为第一页。
isLastPage: whether the current page is the last one.
isLastPage ：当前页面是否为最后一页。

Recommended usage: wrap this in a high-level styled component.

推荐用法：将其包装在高级样式的组件中。

npm package link npm软件包链接 Download Source 下载源

安装 (Installation)

npm install --save vue-lpage

例子 (Examples)

<!-- This will render [ "a", "b" ] -->
<template>
    <vue-lpage :data="['a', 'b', 'c']" :page="1" :results-per-page="2">
      <div slot-scope="{subset}">
        {{ subset }}
      </div>
    </vue-lpage>
</template>

<script>
import VueLpage from 'vue-lpage';
export default {
  components: {
    VueLpage
  }
};
</script>

<template>
    <vue-lpage :data="data" :page="page" :results-per-page="resultsPerPage">
      <div slot-scope="{subset, totalPages, isFirstPage, isLastPage}">
        <div>
            Page <input type="number" v-model="page" :min="1" :max="totalPages"> out of {{ totalPages }}
        </div>
        <div>
            Show <input type="number" v-model="resultsPerPage" :min="1" :max="data.length"> results per page
        </div>
        <button :disabled="isFirstPage" @click="page--">
            Previous
        </button>
        <button :disabled="isLastPage" @click="page++">
            Next
        </button>
        <ul><li v-for="quote in subset" :key="quote">{{ quote }}</li></ul>
      </div>
    </vue-lpage>
</template>

笔记 (Notes)

Pagination is one-based (page 1 is the first page).

分页是基于一个的(第一页是第一页)。

道具 (Props)

data: the array of data to paginate.
data ：要分页的数据数组。
page: the page to display.
page ：要显示的页面。
results-per-page: the maximum amount of results to display per page.
每页结果数：每页显示的最大结果数。

插槽范围 (Slot scope)

subset: the subset of data corresponding to the current page.
子集：与当前页面相对应的数据子集。
totalPages: the total amount of pages.
totalPages ：页面总数。
isFirstPage: whether the current page is the first one.
isFirstPage ：当前页面是否为第一页。
isLastPage: whether the current page is the last one.
isLastPage ：当前页面是否为最后一页。