公共Hooks封装之表格数据useTableData

项目环境

Vue3.x + Ant Design Vue3.x + Vite3.x

封装分解：声明变量

import { ref, shallowRef, isRef } from "vue";

const loading = ref(false); // 表格数据UI交互Loading
const tableData = shallowRef([]); // 表格数据ShallowRef全响应式
const totalElements = ref(0); // 总数据量totalElements

无论是使用过 Ant Design Vue 还是 Element UI 亦或是其他 UI FrameWork 框架，表格里需要的必定有 tableData、totalElements。

封装分解：请求接口

以下代码仅解释封装思想

const getTableData = async() => {
  // ***
  const { data ||
    data: { content, totalElements: total }
  } = await API(QueryParams)   // 请求接口，
  // ***
  tableData.value = data ||
  data.content ||
  data.content.map(item => {***})  //解构data进行赋值
  totalElements.value = total
}

接口请求表格数据，最基础的"增删改查"之一，针对后端提供接口和相关代码产出规范约定俗成后，封装 Hooks 同时考虑，tableData 是否能够直接由 data 解构的 content 赋值，或需要进行二次处理

封装分解：筛选查询 及重置查询

const search = async () => {
  queryParams.value.pageIndex = 1; // 根据筛选想查询数据，重置页码为1，调用接口
  await getTableData();
};

const resetSearch = async () => {
  if (isFunction(options.resetParams)) {
    options.resetParams(); // 重置请求参数
    await getTableData();
  }
};

封装分解：获取分页器配置

以下封装基于项目环境 Ant Design Vue 3.x

const getPaginationOptions = () => {
  return {
    total: totalElements.value,
    current: queryParams.value.pageIndex,
    pageSize: queryParams.value.pageSize,
    showQuickJumper: true,
    showSizeChanger: true,
    showTotal: (_total) => `共 ${_total} 条数据`,
  };
};

封装分解：表格 change 事件（分页、排序、筛选变化触发）

以下封装基于项目环境 Ant Design Vue 3.x

const onTableChange = async (page, _, sorter) => {
  // page: 页码, sorter: 排序字段
  queryParams.value.pageIndex = page.current || 1;
  queryParams.value.pageSize = page.pageSize || 10;
  if (sorter && Object.keys(sorter).length > 0) {
    if (sorter.order) {
      queryParams.value.orderBy = sorter.field; // asc \ desc
      queryParams.value.direction = sorter.order.slice(0, -3);
    } else {
      queryParams.value.orderBy = "";
      queryParams.value.direction = "";
    }
  }
  await getTableData();
};

useTableData.js 完整代码

import { ref, shallowRef, isRef } from "vue";
import { isFunction } from "lodash-es";

export function useTableData(apiInterface, queryParams, options = {}) {
  if (!isRef(queryParams)) throw new Error("queryParams 参数必修为 Ref 类型");
  const loading = ref(false);
  const tableData = shallowRef([]);
  const totalElements = ref(0);

  const getTableData = async () => {
    try {
      loading.value = true;
      const {
        data: { content, totalElements: total },
      } = await apiInterface(queryParams.value);
      if (isFunction(options.handleContent)) {
        tableData.value = content.map(options.handleContent);
      } else {
        tableData.value = content;
      }
      if (isFunction(options.callback)) {
        options.callback(content);
      }
      totalElements.value = total;
    } finally {
      loading.value = false;
    }
  };

  const onTableChange = async (page, _, sorter) => {
    queryParams.value.pageIndex = page.current || 1;
    queryParams.value.pageSize = page.pageSize || 10;
    if (sorter && Object.keys(sorter).length > 0) {
      if (sorter.order) {
        queryParams.value.orderBy = sorter.field;
        queryParams.value.direction = sorter.order.slice(0, -3);
      } else {
        queryParams.value.orderBy = "";
        queryParams.value.direction = "";
      }
    }
    await getTableData();
  };

  const search = async () => {
    queryParams.value.pageIndex = 1;
    await getTableData();
  };

  const resetSearch = async () => {
    if (isFunction(options.resetParams)) {
      options.resetParams();
      await getTableData();
    }
  };

  const getPaginationOptions = () => {
    return {
      total: totalElements.value,
      current: queryParams.value.pageIndex,
      pageSize: queryParams.value.pageSize,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (_total) => `共 ${_total} 条数据`,
    };
  };

  return {
    loading,
    totalElements,
    tableData,
    search,
    resetSearch,
    getPaginationOptions,
    getTableData,
    onTableChange,
  };
}

实际使用示例

// 页面Page.vue
import { useQueryParams, useTableData } from "@/hooks";
import { dataList } from "@/services";

const {
  tableData,
  loading,
  getTableData,
  getPaginationOptions,
  onTableChange,
  search,
} = useTableData(dataList, queryParams);

如此页面只需要引入 Hooks，和接口地址，即可完成单页面数据表格的查询功能～ 算是个人理解意义下的“低代码”～