个人技术分享

前言

紧接上一篇，本篇主要讲和表格相关的全局hook函数封装。

一、useTable自定义hook封装

结构分析：
（1）这个 useTable 钩子的功能是用于管理表格的高度
（2）接受一个可选的 params 对象作为参数，可以包含 id 和 offset 两个属性
（3）定义getHeight函数，实时计算表格区域高度，控制滚动区域

1. hook文件代码+详细注释

// @/hook/use-table/index.jsx
import { useState } from "react";
export const useTable = (params = {}) => {
  // 用于指定表格元素的ID，默认为 render-body
  const id = params.id || "render-body";
  // 用于指定表格元素的高度偏移量，默认为 40
  const offset = params.offset || 40;
  const [tableHeight, setHeight] = useState();
  const getHeight = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const table = document.getElementById(id);
        // 设置表格高度
        setHeight(table.offsetHeight - offset);
        resolve();
      });
    });
  };

  return {
    tableHeight,
    getHeight,
  };
};

2. 页面使用方式

// 引入hook
import { useTable } from "@/hook/index.js";
// 调用
const { getHeight, tableHeight } = useTable();
// 点击展开/收起，表格高度必然要发生变化，调用getHeight更新表格高度
const handlerToggle = (value) => {
  getHeight();
};
//在表格组件，绑定高度变量
<Table
  rowKey="id"
  loading={loading}
  columns={columns}
  dataSource={customerData.list}
  scroll={{
    y: tableHeight,
  }}
  pagination={false}
/>

3. 效果展示

总结

下一篇讲【示例页面构建教学】。关注本栏目，将实时更新。