vue-request--usePagination

天籁晴空

已于 2023-03-21 14:21:31 修改

阅读量1.9k

点赞数 1

分类专栏： # vue3 # js 前端文章标签： javascript 前端 vue

于 2023-03-21 14:16:37 首次发布

本文链接：https://blog.csdn.net/u014105655/article/details/129687441

版权

前端同时被 3 个专栏收录

45 篇文章 1 订阅

订阅专栏

39 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue应用中使用vue-request库的usePagination功能来处理分页数据。它涉及API参数的设定、数据格式化以及如何响应分页、排序和筛选变化。同时，文章展示了如何通过ref和computed属性处理数据，以及在父表选中事件中获取子表数据的方法。

摘要由CSDN通过智能技术生成

安装

npm install vue-request

使用 usePagination

import { usePagination } from 'vue-request'

// API 参数

const parameter = {
	column: 'created_date',
	order: 'desc',
	field: 'ord_id',
	pageNo: 1,
	pageSize: 10,
}
// usePagination
/*
* 参数一  箭头函数 传参  Api
* defaultParams  触发的传参  也是箭头函数 的 参数
* formatResult 返回 结果  就是 解构的 data
* 设置 pagination 分别对应 defaultParams  与 解构的 data
* 这里一般需要 total  所以  data 一般要重新  计算出
*/
const { data, run, loading, current, pageSize, total } = usePagination(
	p => loadOrderData(p),
	{
		defaultParams: [parameter],
		formatResult: ({ data, total }) => ({ data, total }),
		// formatResult: res => res,
		pagination: {
			currentKey: 'pageNo',
			pageSizeKey: 'pageSize',
			totalKey: 'total', // 取值 data:{ data, total } 从 { 中开始 }
		},
	}
)
// ref有数据  但是 .value 为 undefined 通过这种方式--模版使用数据
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
}))

// 分页、排序、筛选变化时触发 @change="handleTableChange" 参考远程加载数据
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
}