usePaginationTable

示例

ID	姓名
No Data

数据展示

接管表格中的查询、分页事件

<script setup lang="ts">
import { usePaginationTable } from '@hooks/components'

function getPaginationData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 10,
        current: 1,
        pageSize: 10,
        data: [
          {
            id: 1,
            name: '张三'
          },
          {
            id: 2,
            name: '李四'
          },
          {
            id: 3,
            name: '王五'
          },
          {
            id: 4,
            name: '赵六'
          },
          {
            id: 5,
            name: '田七'
          },
          {
            id: 6,
            name: '张三'
          },
          {
            id: 7,
            name: '李四'
          },
          {
            id: 8,
            name: '王五'
          },
          {
            id: 9,
            name: '赵六'
          },
          {
            id: 10,
            name: '田七'
          }
        ]
      })
    }, 3000)
  })
}

const pgTable = usePaginationTable({
  apiFun: getPaginationData
})

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 400,
    align: 'center'
  }
]
</script>

<template>
  <div style="width: 500px">
    <a-table
      style="width: 100%"
      rowKey="id"
      :columns="columns"
      v-bind="pgTable.bindProps"
    ></a-table>
  </div>
</template>

<style lang="less" scoped></style>

<script setup lang="ts">
import { usePaginationTable } from '@hooks/components'

function getPaginationData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 10,
        current: 1,
        pageSize: 10,
        data: [
          {
            id: 1,
            name: '张三'
          },
          {
            id: 2,
            name: '李四'
          },
          {
            id: 3,
            name: '王五'
          },
          {
            id: 4,
            name: '赵六'
          },
          {
            id: 5,
            name: '田七'
          },
          {
            id: 6,
            name: '张三'
          },
          {
            id: 7,
            name: '李四'
          },
          {
            id: 8,
            name: '王五'
          },
          {
            id: 9,
            name: '赵六'
          },
          {
            id: 10,
            name: '田七'
          }
        ]
      })
    }, 3000)
  })
}

const pgTable = usePaginationTable({
  apiFun: getPaginationData
})

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 400,
    align: 'center'
  }
]
</script>

<template>
  <div style="width: 500px">
    <a-table
      style="width: 100%"
      rowKey="id"
      :columns="columns"
      v-bind="pgTable.bindProps"
    ></a-table>
  </div>
</template>

<style lang="less" scoped></style>

参数

参数	描述	必选	类型	默认值
apiFun	调用远程接口返回数据	true	()=>[]	-
current	初始页码	false	()=>any	1
pageSize	初始一页尺寸	false	(any)=>void	10
queryInMount	是否在挂载是调用接口初始化数据	false	(any)=>void	false
transformData	接口数据转换	false	(data:any[])=>any[]	-
getQueryParams	获取参数回调	false	(page)=>any	-

实例属性与方法

参数	描述	类型
bindProps	绑定给组件的属性集合	见下文
refresh	刷新当前页面	()=>promise
resetPage	将表格的分页重置	()=>promise
reload	重置表格的分页，并刷新接口	()=>promise
loading	表格当前的加载状态	boolean

bindProps

参数	描述	类型
loading	控制按钮的loading状态	boolean
pagination	表格的分页数据	{}
dataSource	表格当前页数据	any[]
onChange	表格分页改变时的事件监听	event

usePaginationTable ​

示例 ​

参数 ​

实例属性与方法 ​

bindProps ​

usePaginationTable

示例

参数

实例属性与方法

bindProps