@mvmoo/optionsapi v0.0.2

分页

<template>
  <view>
    <!-- 查询框 -->
    <input v-model="keyword" @confirm="handleSearch" placeholder="请输入关键词" />

    <!-- 表格列表 -->
    <view v-if="paginated.loading">加载中...</view>
    <view v-else>
      <view v-for="item in paginated.data" :key="item.id">
        {{ item.name }}
      </view>
    </view>

    <!-- 分页器 -->
    <view>
      <button @click="handlePrev" :disabled="paginated.pagination.page === 1">上一页</button>
      <text>第 {{ paginated.pagination.page }} 页</text>
      <button @click="handleNext">下一页</button>
    </view>
  </view>
</template>

<script>
import { createPaginated } from '@mvmoo/optionsapi'
import { getUserList as api } from '@/api/user' // 示例接口

export default {
  data: () => ({
    finished: false,
    keyword: '',
    paginated: createPaginated(api, { keyword: '' }, {
      pageKey: 'page',
      limitKey: 'limit',
      extractList: res => res.data.rows,
      extractTotal: res => res.data.total,
      defaultPagination: { page: 1, limit: 10 },
      transformData: (rows, res, query) => {} // 自定义格式化数据
    }, 'concat(如果传递末尾参数代表开启数据叠加:适配移动端触底加载, 自行通过count判断是否继续触底)')
  }),

  created() {
    // ✅ 初始化加载
    this.paginated.reload({ keyword: '如果这里传递了参数 createPaginated第二个参数可设置为null' }, 1)
  },

  methods: {
    // 🔍 执行查询
    handleSearch() {
      this.paginated.onSearch({ keyword: this.keyword })
    },

    // 🔁 翻页（下一页）
    handleNext() {
      const { page, limit, total, count } = this.paginated.pagination
      const maxPage = Math.ceil(total / limit)
      if (page < maxPage) {
        this.paginated.onChangePage(page + 1, limit)
      }
    },

    // 🔁 翻页（上一页）
    handlePrev() {
      const { page, limit, count } = this.paginated.pagination
      if (page > 1) {
        this.paginated.onChangePage(page - 1, limit)
      }
    },

    // 🔄 手动刷新
    handleReload() {
      this.paginated.reload({}, 1)
    }
  }

  /* 示例uniapp触底加载 */
  onReachBottom () {
    if (this.finished) return
    const { page, limit, total, count } = this.paginated.pagination
    this.paginated.onChangePage(page + 1, limit)
    this.finished = count < limit
  },
}
</script>