在Vue3中封装常用hooks之useTable

在项目开发中经常会使用Table,我们用的antd或者element等前端UI框架中的Table组件需要传递一些参数,比如tableData、pagination、tableData还有就是一些查询的方法和参数,每次使用都要重新声明就很繁琐,所以现在就来封装一个Vue3中的useTable

1.代码实现

话不多说直接上代码

/*
 * @Author: yjl
 * @Date: 2023-04-14 15:48:48
 * @LastEditors: yjl
 * @Description: useTable
 */
import { reactive, toRefs } from 'vue'
interface Pagination {
  currentPage: number
  pageSize: number
  total: number
  showTotal?: any
  showSizeChanger?: boolean
  showQuickJumper?: boolean
  pageSizeOptions?: Array<string>
}
interface tableParams {
  pagination: Pagination
  tableData: any[]
  seachParams: object
}
/**
 * 封装需求
 * 1.返回一个tableData
 * 2.返回一个分页
 * 3.返回一个查询tableData的方法
 * 4.返回一个分页change方法
 * 5.返回一个分页大小change方法
 * 6.返回一个reset方法
 * 7.返回一个seach方法
 * 8.返回一个seachParam的对象
 * 9.返回一个可设置tableData的方法
 */
/**
 *  参数说明
 * @param api 请求接口的api(必传)
 * @param initParams 初始化默认参数(非必填)
 * @param callBack 拿到数据后的回调方法方便处理数据
 * @returns
 */
export const useTable = (
  api: (param: any) => Promise<any>,
  initParams: object = {},
  callBack?: Function,
) => {
  const state = reactive<tableParams>({
    pagination: {
      currentPage: 1,
      pageSize: 10,
      total: 0,
    },
    tableData: [],
    seachParams: {},
  })
  //请求table数据
  function queryTableData() {
    const postData = {
      ...state.pagination,
      ...state.seachParams,
      ...initParams,
    }
    return api(postData).then((res) => {
      //如果要处理返回数据的话
      callBack && (res = callBack(res))
      // 复制给table
      state.tableData = res.currentPageData
      // 赋值总数
      state.pagination.total = res.totalCount
      return res
    })
  }
  //分页change
  function handPageChange(page) {
    state.pagination.currentPage = page
    queryTableData()
  }
  //分页大小change
  function handPageSizeChange(current, size) {
    console.log(size)
    state.pagination.pageSize = size
    queryTableData()
  }
  //搜索
  function handSeach() {
    state.pagination.currentPage = 1
    queryTableData()
  }
  //重置搜索
  function reset() {
    state.pagination.currentPage = 1
    state.seachParams = {}
    queryTableData()
  }
  function setTableData(data: any[]) {
    state.tableData = data
  }
  return {
    ...toRefs(state),
    handPageChange,
    queryTableData,
    handSeach,
    handPageSizeChange,
    reset,
    setTableData,
  }
}

2.使用

 import { useTable } from '/@/hooks/web/useTable'  //引入
 let { 	pagination, //分页对象
 		tableData, //列表数据
 		seachParams, //查询条件对象
 		queryTableData,//获取数据的方法
  		handPageChange, //分页change以及分页大小change
  		handPageSizeChange } =useTable(queryList)  //queryList为项目中封装的API

3.总结

大致就这样,其实还有很多参数没写上,这个算是一个简易版的useTable吧