antDesgin + vue3 table组件二次封装

1.在hook文件下创建usePageReq.js,封装代码如下（代码是之前一个博主那看到的，忘记是那个了，根据我的需求稍作改动）

import { ref, reactive, toRefs, watch } from 'vue'export const usePageReq = (api, otherParams) => {// 表格的loading（不需要可以删除）const tableLoading = ref(true)// 分页的页数和一页的大小const pageParams = reactive({PageNumber: 1,MaxResultCount: 15})const datas = ref([])const totalCount = ref()  //数据的总条数let apiOtherParams =ref({}) const getPage = (serchParms) => {// 处理传过来的参数Object.keys(otherParams).forEach(key => {let targeParams = otherParams[key]if(typeof targeParams === 'object') {Object.assign(apiOtherParams.value, targeParams)} else {// 日期参数date的话，而且数组说明是dateRange，参数才分为start和end, date:[]if(key === 'date' && Array.isArray(targeParams)) {apiOtherParams.value['start'] = targeParams[0]apiOtherParams.value['end'] = targeParams[1]} else {apiOtherParams.value[key] = targeParams}}})// 当页面有查询寻求时，传入的查询参数const realSerchParms = serchParms ? { ...serchParms } :''api({//请求参数,这里取决于你的接口需要什么参数...pageParams, //分页...apiOtherParams.value, // 请求时除了分页以外的参数...realSerchParms // 查询参数}).then(res=> {// 这里接收你的请求结果，有什么数据需要获取都写在这里datas.value = res.itemstableLoading.value=falsetotalCount.value=Number(res.totalCount)  //后端返回给我的总数是字符串，是数字类型的可以不转换})}watch(() =>otherParams, (newVal) => {if (newVal) {getPage()  }},  { immediate: true, deep: true })// 刷新表格再次请求const search = () => {window.scrollTo(0, 0)pageParams.PageNumber = 1getPage()}// 对外面返回你的参数，想返回什么写什么return {datas,pageParams,getPage,search,totalCount,tableLoading}
}

2.table组件封装代码

 `共 ${totalCount} 条`"show-size-changer@change="change"/>

3.在组件中使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！