目录
开箱即用,理解容易。
1、useTableData
import { reactive } from 'vue'
import { getType } from '@/utils/utils'
export const useTableData = (api) => {
if (typeof api !== 'function' && getType(api) !== 'Promise') {
throw new Error('请传入Promise类型的api请求')
}
// 分页器每页个数配置组
const PAGE_SIZES = reactive([10, 20, 50])
// 初始化数据
const DEFAULT_TABLE_DATA = reactive({
list: [],
totalCount: 0,
isLoading: false,
currentPage: 1,
pageSize: PAGE_SIZES[0]
})
// 数据表格
const tableData = reactive({
list: DEFAULT_TABLE_DATA.list,
totalCount: DEFAULT_TABLE_DATA.totalCount,
isLoading: DEFAULT_TABLE_DATA.isLoading
})
// 数据表格基本请求参数
let tableParams = reactive({
currentPage: DEFAULT_TABLE_DATA.currentPage,
pageSize: DEFAULT_TABLE_DATA.pageSize
})
// 获取数据
const fetchData = async () => {
tableData.isLoading = true
const res = await api(tableParams).catch(() => {
tableData.isLoading = false
})
if (res) {
console.log