# 前端数据分页 LimitStore

该类型是一个前端数据分页

# 属性

属性名称 数据类型 说明
data Array 原始数据集
limit Number 每页数据量
pageData Array 当前分页数据
total Number 总数据量
totalPage Number 总分页数量

# 方法

方法名称 说明 参数
load(data) 重新加载数据 data:新的数据集
select(page) 选择指定页码的数据 page:页码
setLimit(limit) 重新设置每页数据量。执行后,会默认跳转到第1页 limit:每页数据量

# 实例

<template>
  <div>
    <ul>
      <li v-for="item of  store.pageData">{{item}}</li>
    </ul>
    <div class="text-center">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="store.totalPage"
        :current-page="nowPage"
        v-on:current-change="handlerPageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {LimitStore} from 'sjfx';

  const data = [];
  for (let i = 1; i <= 313; i++) {
    data.push(i);
  }

  export default {
    data() {
      return {
        store: new LimitStore(20, data),
        nowPage: 1
      }
    },
    methods: {
      handlerPageChange(newPage) {
        this.store.select(newPage);
      },
    }
  }
</script>
Last Updated: 1/14/2020, 12:00:52 PM