项目场景:
项目有很多带分页的表格页面,需要重复请求数据处理分页,这时就需要一个共用的方法统一处理这些重复的代码。
记录一下,方便以后复制。
使用Element。
方法:
为什么要区分总条数是否单独获取,公司原因,部分接口总条数无法和数据一起拿回来,需要单独再请求一次。
1.新建一个ts文件保存方法。
import { ref } from 'vue'
import type { Ref } from 'vue'
// 请求api的返回参数类型
interface ResultType<T> {
state: number,
data: T,
msg: string
}
// 传入参数的类型
interface UserTabParams {
api: (params: any) => Promise<ResultType<any>>,
paramsValue?: any
// 总条数是否需要单独获取,传入true表示需要。
falg?: boolean | undefined
}
export default function useTab ({ api, paramsValue, falg }: UserTabParams) {
const num = ref(10)
// 是否加载中
const isLoading = ref(false)
// 表格数据
const tableData: Ref<{}[]> = ref([])
// 传入的请求api
// eslint-disable-next-line prefer-const
let httpRess: (params: any) => Promise<ResultType<any>>
// 发起请求获取表格数据
async function getAdminData (api: (params: any) => Promise<ResultType<any>>, paramsValue: any, falg:boolean | undefined) {
try {
// 开启加载状态
isLoading.value = true
// 请求数据,区分总条数需要单独请求的情况
// 因为公司接口原因:
1.请求参数autoCount如果为true,就表示需要总条数,那本次请求就只有总条数返回, 没有数据返回;所以请求数据时autoCount需要为false。
2.但是又有部分接口的总条数可以和总条数一起返回,所以需要区分当前传入接口API是否需要单独获取总条数。
3.所以当 falg 传入为false或者没有传入时,表示当前接口不需要单独获取,那么请求参数autoCount为true把总条数和数据一起拿回来;当传入true时,表示总条数需要单独获取,那么第一次请求时autoCount为flase获取数据,然后发起第二次请求获取总条数。
const adminRes = await api({
autoCount: falg ? !falg : true,
page: currentPage.value,
resultNum: num.value,
...paramsValue
})
// 获取总条数,falg为true 总条数需要单独请求。
if (falg) {
const sizeAllRes = await api({
autoCount: true,
...paramsValue
})
if (adminRes.state === 1) {
// 数据
tableData.value = adminRes.data.results
// 总页数
pageCount.value = adminRes.data.pageCount
// 总条数
sizeAll.value = sizeAllRes.data.sizeAll
// 当前页数
// currentPage.value = adminRes.data.pageNum
}
} else {
if (adminRes.state === 1) {
// 数据
tableData.value = adminRes.data.results
// 总页数
pageCount.value = adminRes.data.pageCount
sizeAll.value = adminRes.data.sizeAll
// currentPage.value = adminRes.data.pageNum
}
}
} finally {
// 关闭加载状态
isLoading.value = false
}
}
// 总条目个数
const sizeAll = ref(0)
// 当前分页
const currentPage = ref(1)
// 总页数
const pageCount = ref(100)
// 修改每页显示条目个数时触发,获取修改的结果
const handleSizeChange = () => {
getAdminData(httpRess, paramsValue, falg)
}
// 改变当前页数触发/翻页,获取改变后的页数
const handleCurrentChange = () => {
console.log(isLoading.value)
getAdminData(httpRess, paramsValue, falg)
}
// 接收用户搜索的关键字
function dataKeyword (val: any) {
if (paramsValue) {
paramsValue = val
getAdminData(api, paramsValue, falg)
}
}
httpRess = api
getAdminData(api, paramsValue, falg)
return {
handleSizeChange,
handleCurrentChange,
tableData,
isLoading,
sizeAll,
currentPage,
pageCount,
dataKeyword
}
}
2.在页面中引入并使用。
引入:import useTab from '@/文件路径'
使用:
const {
handleSizeChange,
handleCurrentChange,
tableData,
isLoading,
currentPage,
dataKeyword,
// 总条数
sizeAll
} = useTab({ api: '接口Api', paramsValue: '用户搜索关键字对象', falg: true })