resize功能有时生效有时不生效🤣

问题：首次进入在本页面不生效，进入到其他已经生效的界面，再回来就生效了

视频： https://github.com/hemengke1997/use-antd-resizable-header/assets/55389796/8d2e883a-94e8-41d4-a3b1-a74cd2b70937

问题代码：

export const getColumns = ({
  handleEdit,
  handleDelete,
  enumMap = {},
}: Options) => {
  const columns: ProColumns<ProjectFIPTableListItem>[] = [
    {
      title: "序号",
      // dataIndex: "number",
      fixed: "left",
      key: "number",
      width: 60,
      align: "center",
      valueType: "indexBorder",
      hideInSearch: true,
      // render: (text, record, index) => {
      //   const num = pageNum || 1;
      //   const size = pageSize || 10;
      //   return `${(num - 1) * size + (index + 1)}`;
      // },
      ...requiredFormItem,
    },
    {
      title: "功能名称",
      dataIndex: "function",
      className: "fixi-font-strong",
      fixed: "left",
      width: 200,
      ...requiredFormItem,
      fieldProps: {
        maxLength: 20,
        count: {
          show: true,
          max: 20,
        },
      },
    },
    {
      title: "项目",
      dataIndex: "project",
      valueType: "select",
      className: "fixi-font-strong",
      width: 80,
      fixed: "left",
      render: (dom, record) => record?.project?.toString?.(),
      fieldProps: {
        mode: "multiple",
        maxTagCount: 2,
        autoClearSearchValue: false,
        options: enumMap.project || [],
      },
      ...requiredFormItem,
    },
    {
      title: "功能域",
      valueType: "select",
      width: 80,
      dataIndex: "functionDomainId",
      initialValue: 1,
      hideInSearch: true,
      fieldProps: {
        mode: "multiple",
        maxTagCount: 2,
        options: enumMap.functionDomain || [],
      },

      ...requiredFormItem,
    },
    {
      title: "功能类型",
      valueType: "select",
      width: 130,
      dataIndex: "functionTypeId",
      hideInSearch: true,
      fieldProps: {
        style: {
          minWidth: 250,
        },
        mode: "multiple",
        maxTagCount: 2,
        options: enumMap.functionType || [],
      },

      ...requiredFormItem,
    },

    {
      title: "关联配置项",
      width: 100,
      dataIndex: "relatedItem",
      valueType: "select",
      hideInSearch: true,
      fieldProps: {
        options: enumMap.relatedItem || [],
      },
    },
    {
      title: "功能ID",
      width: 100,
      dataIndex: "functionId",
      fieldProps: {
        maxLength: 10,
        count: {
          show: true,
          max: 10,
        },
      },
    },
    {
      title: "功能简介",
      width: 100,
      dataIndex: "functionIntro",
      hideInSearch: true,
    },
    {
      title: "部门",
      dataIndex: "departmentId",
      hideInSearch: true,
      initialValue: 1,
      width: 80,
      valueType: "select",
      fieldProps: {
        options: enumMap.department || [],
      },

      ...requiredFormItem,
    },
    {
      title: "项目经理",
      width: 100,
      dataIndex: "projectManager",
      render: (_: any, record: any) => {
        return <UserRow data={record.projectManager} />;
      },
      renderFormItem: ({ type }) => {
        return (
          <UserSelect
            style={{ width: "100%" }}
            valuekey="domainAccount"
            options={enumMap?.projectManager || []}
            isMultiple={type === "table"}
            showSearch
            placeholder="请选择人员"
          />
        );
      },
      ...requiredFormItem,
    },
    {
      title: "集成开发",
      width: 100,
      dataIndex: "developer",
      render: (_: any, record: any) => {
        return <UserRow data={record.developer} />;
      },
      renderFormItem: ({ type }) => {
        return (
          <UserSelect
            style={{ width: "100%" }}
            valuekey="domainAccount"
            options={enumMap?.developer || []}
            isMultiple={type === "table"}
            showSearch
            placeholder="请选择人员"
          />
        );
      },
      ...requiredFormItem,
    },
    {
      title: "整车功能FIP表",
      width:400,
      hideInSearch: true,
      dataIndex: "FIPTable",
      valueType: "group",
      children: [
        {
          width:60,
          title: "MULE",
          dataIndex: "fip_MULE_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          width:60,
          title: "EP1",
          dataIndex: "fip_EP1_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          width:60,
          title: "EP2",
          dataIndex: "fip_EP2_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          width:60,
          title: "PPV",
          dataIndex: "fip_PPV_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          title: "PP",
          width:60,
          dataIndex: "fip_PP_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          title: "P",
          width:60,
          dataIndex: "fip_P_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
        {
          title: "SOP",
          width:60,
          dataIndex: "fip_SOP_id",
          valueType: "select",
          fieldProps: {
            options: enumMap.fip || [],
          },
        },
      ].map((item) => ({ ...item, width: 60 })) as any,
    },
    {
      title: "FRD文档",
      dataIndex: "frd",
      // width: 100,
      hideInSearch: true,
      ellipsis: true,
      render: (_: any, record: any) => {
        return (
          <a href={record.frd} target="_blank" rel="noreferrer">
            {record.frd}
          </a>
        );
      },
    },
    {
      title: "操作",
      width: 100,
      fixed: "right",
      align: "center",
      valueType: "option",
      render: (_, record) => {
        return (
          <Space>
            <Button
              type="link"
              style={{ padding: 0 }}
              key={"edit"}
              disabled={!record?.canEdit}
              onClick={() => handleEdit?.("edit", record)}
            >
              编辑
            </Button>

            <Popconfirm
              key="delete"
              placement="topLeft"
              title="你确定删除吗?"
              okText="确定"
              cancelText="取消"
              onConfirm={() => handleDelete?.(record)}
            >
              <Button
                type="link"
                style={{ padding: 0 }}
                disabled={!record?.canDel}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  // if (formType === "form")
  // return columns
  //   .slice(1, 3)
  //   .map((item) => ({ ...item, hideInSearch: false }));
  return batchSetColumnsProps(columns, { align: "center", ellipsis: true });
};

  const columns = getColumns({
    enumMap: enumMap,
    extraData,
    handleEdit,
    handleDelete,
  });

  const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
    columns: useMemo(() => columns, []) as any,
    maxConstraints: 500,
    cache: true,
  });

  return (
    <div>
      <ProTable
        // debounceTime={1000}
        columns={resizableColumns}
        components={components}
        scroll={{ x: tableWidth }}
        columnsState={{
          persistenceKey: "columnsState/project-fip-table",
          persistenceType: "localStorage",
        }}
        options={
          {
            // setting: false,
            //  fullScreen: true,
          }
        }
        bordered
        request={handleGetTableData as any}
        actionRef={ref}
        onReset={() => {
          setInitParams({});
        }}
        formRef={formRef}
        rowKey={"id"}
        search={{
          labelWidth: "auto",
          // span: {  xs: 24, sm: 12, md: 8, lg: 6, xl: 6, xxl: 6 },
        }}
        // search={false}
        pagination={{
          pageSize: pageSize,
          defaultPageSize: pageSize,
          onChange: (page, pageSize) => {
            setPageSize(pageSize);
          },
          position: ["bottomCenter"],
          size: "default",
          showQuickJumper: true,
          showSizeChanger: true,
        }}
        toolBarRender={() => [
          <Button
            key="add"
            type="primary"
            disabled={!extraData?.canAdd}
            style={{ marginLeft: 15 }}
            onClick={() => {
              handleEdit("add");
            }}
          >
            新建
          </Button>,
        ]}
      />

"dependencies": {
    "@ant-design/colors": "^7.0.0",
    "@ant-design/pro-components": "^2.6.43",
    "@chehejia/authli-js": "^1.23.0",
    "@chehejia/authli-ui-components": "^1.10.0",
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/modifiers": "^6.0.1",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@fortune-sheet/react": "^0.18.0",
    "@grapecity/spread-sheets": "^16.1.2",
    "@grapecity/spread-sheets-react": "^16.1.2",
    "@logicflow/core": "^1.2.3",
    "@minko-fe/use-antd-resizable-header": "^2.8.15",
    "@reduxjs/toolkit": "^1.7.1",
    "@types/antd": "^1.0.0",
    "@types/lodash": "^4.14.191",
    "@types/qrcode": "^1.5.2",
    "antd": "5.11.0",
    "dayjs": "^1.11.7",
    "echarts": "^5.4.1",
    "gantt-task-react": "^0.3.9",
    "js-cookie": "^3.0.1",
    "lib-flexible": "^0.3.2",
    "lodash": "^4.17.21",
    "logicflow": "^1.0.1",
    "moment": "^2.29.4",
    "qrcode": "^1.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.4.3",
    "react-router6-prompt": "^1.1.0",
    "redux": "^4.2.0",
    "tippy.js": "^6.3.7",
    "vite-plugin-style-import": "^2.0.0"
  },

hemengke1997 / use-antd-resizable-header

resize功能有时生效有时不生效🤣 #82