o-table分页渲染

[YangYue2022]

请问分页渲染的逻辑是什么，我改成如下代码后就没有分页器了

<template>
  <o-table ref="tableRef" :table-config="tableConfig">
    <template #table-top>
      <div style="display: flex; align-items: center">
        <el-select
          v-model="selectedBucket"
          placeholder="选择 Bucket"
          style="width: 150px; margin-right: 10px"
        >
          <el-option
            v-for="bucket in buckets"
            :key="bucket.value"
            :label="bucket.label"
            :value="bucket.value"
          />
        </el-select>
        <el-input
          v-model="searchQuery"
          placeholder="搜索文件名称"
          style="width: 200px; margin-right: 10px"
        />
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </template>
  </o-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'
import { useDelete } from '@/hooks'
import { Api } from '@/api/common/enum'
import { deleteArticle } from '@/api/base/article'
import type { ITableConfig, TableInstance } from '@/types'

const resetForm = () => {
  searchQuery.value = '' // 清空搜索框
  selectedBucket.value = '' // 清空选择的 Bucket
}

const tableConfig: ITableConfig = {
  api: Api.file,
  headers: [
    {
      prop: 'FileKey',
      label: '文件Key'
    },
    {
      prop: 'file_name',
      label: '文件名称'
    },
    {
      prop: 'Size',
      label: '大小'
    },
    {
      prop: 'CreatedAt',
      label: '创建时间'
    },
    {
      prop: 'UpdatedAt',
      label: '更新时间'
    },
    {
      prop: 'comments',
      label: '描述'
    }
  ],
  operations: {
    width: 115,
    buttons: [
      {
        text: '编辑',
        show: true,
        click: ({ row }) => {
          router.push(`/base/article/edit/${row.id}`)
        }
      },
      {
        text: '删除',
        type: 'danger',
        show: true,
        click: ({ row }) => {
          handleDelete(row.id)
        }
      }
    ]
  }
}

const tableRef = ref<TableInstance>()
const searchQuery = ref('')
const selectedBucket = ref('')
const buckets = ref([
  { label: 'Bucket 1', value: 'bucket1' },
  { label: 'Bucket 2', value: 'bucket2' },
  { label: 'Bucket 3', value: 'bucket3' }
])

const handleSearch = () => {
  // 这里可以实现搜索逻辑，例如调用API或过滤表格数据
  console.log(
    'Searching for:',
    searchQuery.value,
    'in bucket:',
    selectedBucket.value
  )
}

const handleDelete = (id: number) => {
  const { onDelete } = useDelete()
  onDelete(deleteArticle, id, tableRef)
}
</script>

[wjw-gavin]

分页只依赖这些参数

 <!-- 分页 -->
  <el-pagination
    v-model:current-page="pagination.page"
    v-model:page-size="pagination.page_size"
    class="mt-5"
    :layout="pagination.layout"
    :total="pagination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

我试了一下，当 :total 删掉后分页器就没了，可以检查下你的分页数据是否正确。

[wjw-gavin]

这个项目目前还不是太完善，有些代码写的不太合理，但是还是能用的，我也在用，只是在实际应用中要根据需要自己做些调整。

[YangYue2022]

好嘞，看了下处理响应分页的部分，已解决。谢谢。