hooks | 朋友用了都说好的useTable

你是不是还在为了重复性的写表格查询，重置，分页等而烦恼？

快使用hooks，早日摸鱼下班，朋友用了都说好！👍

🪄 定义 interface

export namespace Table {
  export interface Pagination {
    page: number;
    pageSize: number;
    total: number;
  }
  export interface TableStateProps {
    tableData: any[];
    pagination: Pagination;
    searchParam: {
      [key: string]: any;
    };
    searchInitParam: {
      [key: string]: any;
    };
    totalParam: {
      [key: string]: any;
    };
    icon?: {
      [key: string]: any;
    };
  }
}

🖥️ 写一个useTable的hooks

import { reactive, toRefs } from "vue";
import { Table } from "../types/hooks/useTable.type";
/**
 * @description table 页面表格操作方法封装
 * @param {Function} api 获取表格数据 api 方法(必传)
 * @param {Object} initParam 获取数据初始化参数(非必传，默认为{})
 * */
export const useTable = (
  api: (params: any) => Promise<any>,
  initParam: object = {}
) => {
  const state = reactive<Table.TableStateProps>({
    // 表格数据
    tableData: [],
    // 分页数据
    pagination: {
      // 当前页数
      page: 1,
      // 每页显示条数
      pageSize: 10,
      // 总条数
      total: 0,
    },
    // 查询参数(只包括查询)
    searchParam: {},
    // 初始化默认的查询参数
    searchInitParam: {},
    // 总参数(包含分页和查询参数)
    totalParam: {},
  });

  // 获取表格数据
  const _getTableData = () => {
    return new Promise((resolve, reject) => {
      // 合并参数
      Object.assign(state.totalParam, initParam, {
        page: state.pagination.page,
        pageSize: state.pagination.pageSize,
      });
      api(state.totalParam).then((res) => {
        console.log(res);
        state.tableData = res.data;
        resolve(res.data);
      });
    });
  };

  // 搜索
  const _search = (val?: object) => {
    return new Promise(async (resolve) => {
      state.pagination.page = 1;
      Object.assign(
        state.totalParam,
        { page: state.pagination.page, pageSize: state.pagination.pageSize },
        val
      );
      const result: any = await _getTableData();
      resolve(result.data);
    });
  };

  // 重置
  const _reset = () => {
    return new Promise(async (resolve) => {
      state.pagination.page = 1;
      state.totalParam = {}
      Object.assign(
        state.totalParam,
        { page: state.pagination.page, pageSize: state.pagination.pageSize }
      );
      const result: any = await _getTableData();
      resolve(result.data);
    });
  };

  // 翻页
  const _sizeChange = (val: number) => {
    return new Promise(async (resolve) => {
      state.pagination.pageSize = val;
      const result: any = await _getTableData();
      resolve(result.data);
    });
  };

  const _currentChange = (val: number) => {
    return new Promise(async (resolve) => {
      state.pagination.page = val;
      const result: any = await _getTableData();
      resolve(result.data);
    });
  };

  return {
    ...toRefs(state),
    _getTableData,
    _search,
    _reset,
    _sizeChange,
    _currentChange,
  };
};

✌️ 如何使用

在 vue 的 ts 文件中直接使用

// xxx为需要请求的接口
const { _getTableData, _search, _reset, _sizeChange, _currentChange } = 
useTable(xxx, { pageSize: data.pageConfig.pageSize });

// 绑定数据，为了减少重复性的操作，将数据统一处理
const handleBindData = async (fn: Function, val?: any) => {
  const result: any = await fn(val);
  data.tableData = result.data;
  data.pageConfig.page = result.pageNum;
  data.pageConfig.pageSize = result.pageSize;
  data.pageConfig.total = result.totalCount;
};

// 获取数据
const handleGetTracks = () => {
  handleBindData(_getTableData);
};

// 切换一页显示的的数量
const handlePageSizeChange = (val: number) => {
  handleBindData(_sizeChange, val);
};
const handleCurrentChange = (val: number) => {
  handleBindData(_currentChange, val);
};

// 搜索
const handleSearch = () => {
  handleBindData(_search, { lineName: lineName.value });
};

// 重置
const handleReset = () => {
  handleBindData(_reset);
};

打完下班摸鱼！🏃