安装
npm install vue-request
使用 usePagination
import { usePagination } from 'vue-request'
const parameter = {
column: 'created_date',
order: 'desc',
field: 'ord_id',
pageNo: 1,
pageSize: 10,
}
const { data, run, loading, current, pageSize, total } = usePagination(
p => loadOrderData(p),
{
defaultParams: [parameter],
formatResult: ({ data, total }) => ({ data, total }),
pagination: {
currentKey: 'pageNo',
pageSizeKey: 'pageSize',
totalKey: 'total',
},
}
)
const dataSource = computed(() => data?.value?.data || [])
const pagination = computed(() => ({
total: total.value,
current: current.value,
pageSize: pageSize.value,
pageSizeOptions: [
'5',
'10',
'15',
'20',
'25',
'30',
'50',
'100',
'150',
'200',
'300',
'500',
],
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
},
showQuickJumper: true,
showSizeChanger: true,
serverQuery: true
}))
const handleTableChange = (pag, filters, sorter) =>
run({
pageSize: pag.pageSize,
pageNo: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
})
再次获取 数据 run 函数 即可
const parameter = {
mainDataID: '2390345',
order: 'desc',
pageNo: '1',
pageSize: '5',
}
const dataSource = ref([])
const onSelectSubListData = async selectedRowKey => {
selectedKey.value = selectedRowKey
parameter.mainDataID = selectedRowKey
const { data } = await run(parameter)
dataSource.value = data
}