@hw-component/table 1.9.87 → 1.9.89

package/lib/HTableBody/index.js

@@ -12,9 +12,6 @@ var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/ob
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/keys');
-var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var jsxRuntime = require('react/jsx-runtime');
 var ProTable = require('@ant-design/pro-table');
 var useControl = require('./hooks/useControl.js');
@@ -28,13 +25,12 @@ var AlertMsg = require('./AlertMsg.js');
 var index = require('./Options/index.js');
 var index$2 = require('./HeaderTitle/index.js');
 var defaultRender = require('./defaultRender.js');
-var React = require('react');
+var useRowClassName = require('./hooks/useRowClassName.js');
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender", "paginationActionRender", "localSorter", "columnsState", "tableExtraRender", "table", "onChange", "bordered", "rowClassName"],
   _excluded2 = ["value", "onChange", "reset"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ConfigContext = antd.ConfigProvider.ConfigContext;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Body = (function (bodyProps) {
   var configData = bodyProps.configData,
     _bodyProps$pagination = bodyProps.pagination,
@@ -62,10 +58,9 @@ var Body = (function (bodyProps) {
     tableExtraRender = bodyProps.tableExtraRender,
     table = bodyProps.table,
     tableOnchange = bodyProps.onChange,
-    bordered = bodyProps.bordered,
-    _bodyProps$rowClassNa = bodyProps.rowClassName,
-    _rowClassName = _bodyProps$rowClassNa === void 0 ? "" : _bodyProps$rowClassNa,
-    props = _objectWithoutProperties(bodyProps, _excluded);
+    bordered = bodyProps.bordered;
+    bodyProps.rowClassName;
+    var props = _objectWithoutProperties(bodyProps, _excluded);
   var _ref = rowSelection || {},
     selectedRowKeys = _ref.selectedRowKeys,
     configAlwaysShowAlert = _ref.alwaysShowAlert;
@@ -136,11 +131,7 @@ var Body = (function (bodyProps) {
     table: tableInstance,
     localSorter: localSorter
   });
-  var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
-    keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys;
-    selectedRowData.selectAll;
-  var _useContext = React.useContext(ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
+  var rowClassNameFn = useRowClassName.default(bodyProps);
   return jsxRuntime.jsx("div", {
     style: defaultTableStyle,
     className: "hw_table_body  ".concat(className),
@@ -166,15 +157,7 @@ var Body = (function (bodyProps) {
           return tableEmptyRender === null || tableEmptyRender === void 0 ? void 0 : tableEmptyRender(tableInstance);
         },
         children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
-          rowClassName: function rowClassName(record, index, indent) {
-            var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
-            var propsRowClassName = typeof _rowClassName === "function" ? _rowClassName(record, index, indent) : _rowClassName;
-            if ((keys === null || keys === void 0 ? void 0 : _indexOfInstanceProperty(keys).call(keys, key)) !== -1) {
-              var _context;
-              return _concatInstanceProperty(_context = "".concat(getPrefixCls("table-row-selected"), " ")).call(_context, propsRowClassName);
-            }
-            return propsRowClassName;
-          },
+          rowClassName: rowClassNameFn,
           bordered: bordered,
           columnsState: _objectSpread(_objectSpread({}, selfColStatus), {}, {
             value: value

package/lib/HTableBody/modal.d.ts

@@ -1,5 +1,5 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import type React from "react";
+import React, { Key } from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type { ActionRenderFn, ConfigDataModal, HRowSelection, HTableInstance, ParamsModal } from "@/components/modal";
 import type { AffixProps } from "antd/lib/affix";
@@ -25,3 +25,9 @@ export interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSour
     table?: HTableInstance;
     pagination?: IPaginationProps | false;
 }
+export interface RowRadioSelectionProps {
+    data: any;
+    onChange?: (keys: Key[], data: any[]) => void;
+    getCheckboxProps?: HRowSelection["getCheckboxProps"];
+    index: number;
+}

package/lib/HTableBody/utils.d.ts

@@ -5,3 +5,4 @@ export declare const outColSetting: (columns: ConfigDataModal, columnsState?: Co
     checkCols: ConfigDataModal;
     keys: string[];
 };
+export declare const rowItemFn: (action: any, record: any, index: any) => any;

package/lib/HTableHeader/RangePickerSearch.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const _default: import("react").ForwardRefExoticComponent<any>;
+declare const _default: import("react").ForwardRefExoticComponent<import("@hw-component/form/es/Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export default _default;

package/lib/TableConfig.d.ts

@@ -7,6 +7,7 @@ interface HTableConfigContextModal {
     tableStyle?: React.CSSProperties;
     paginationStyle?: React.CSSProperties;
     valueTypeConfig?: ValueTypeConfigModal;
+    defaultSelectedRowClassName?: string | null;
 }
 export declare const HTableConfigContext: React.Context<HTableConfigContextModal | null>;
 export declare const useHTableConfigContext: ({ emptyRender, errorRender, headerStyle, tableStyle, paginationStyle, }: HTableConfigContextModal) => {
@@ -16,6 +17,7 @@ export declare const useHTableConfigContext: ({ emptyRender, errorRender, header
     tableStyle: React.CSSProperties | undefined;
     paginationStyle: React.CSSProperties | undefined;
     valueTypeConfig: ValueTypeConfigModal;
+    defaultSelectedRowClassName: string | null | undefined;
 };
 declare const Index: React.FC<HTableConfigContextModal>;
 export default Index;

package/lib/TableConfig.js

@@ -21,14 +21,16 @@ var useHTableConfigContext = function useHTableConfigContext(_ref) {
     configTableStyle = _ref2.tableStyle,
     configPaginationStyle = _ref2.paginationStyle,
     _ref2$valueTypeConfig = _ref2.valueTypeConfig,
-    valueTypeConfig = _ref2$valueTypeConfig === void 0 ? {} : _ref2$valueTypeConfig;
+    valueTypeConfig = _ref2$valueTypeConfig === void 0 ? {} : _ref2$valueTypeConfig,
+    defaultSelectedRowClassName = _ref2.defaultSelectedRowClassName;
   return {
     errorRender: errorRender || configErrorRender,
     emptyRender: emptyRender || configEmptyRender,
     headerStyle: headerStyle || configHeaderStyle,
     tableStyle: tableStyle || configTableStyle,
     paginationStyle: paginationStyle || configPaginationStyle,
-    valueTypeConfig: valueTypeConfig
+    valueTypeConfig: valueTypeConfig,
+    defaultSelectedRowClassName: defaultSelectedRowClassName
   };
 };
 var Index = function Index(_ref3) {

package/lib/modal.d.ts

@@ -2,7 +2,7 @@ import type { ProColumns } from "@ant-design/pro-table/lib/typing";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import type React from "react";
+import React, { Key } from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
@@ -44,6 +44,7 @@ export type FooterBtnRenderFn = (dom: React.ReactNode, total: string, selectedRo
 export type actionFn = (...arg: any[]) => void;
 export interface RowSelectionOuter {
     allPageCheck?: boolean;
+    onChange?: (keys: Key[], data: any[]) => void;
 }
 export type HRowSelection = RowSelectionOuter & (TableProps<any>["rowSelection"] & {
     alwaysShowAlert?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.87",
+  "version": "1.9.89",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/HTableBody/HeaderTitle/hooks.ts

@@ -0,0 +1,48 @@
+import {MutableRefObject, useEffect, useLayoutEffect, useState} from "react";
+
+interface HeaderStyleParams {
+    bodyRef:MutableRefObject<HTMLDivElement|null>;
+    titleContentRef:MutableRefObject<HTMLDivElement|null>;
+    rightNodeRef:MutableRefObject<HTMLDivElement|null>;
+}
+
+export const useHeaderStyle = ({bodyRef,titleContentRef,rightNodeRef}:HeaderStyleParams) => {
+    const [style, setStyle] = useState({});
+    const setHeaderStyle = () => {
+        const headerWidth = bodyRef.current?.clientWidth || 0;
+        console.log(headerWidth,"headerWidth")
+        const titleWidth = titleContentRef.current?.clientWidth || 0;
+        const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
+        if (rightNodeWidth + titleWidth >= headerWidth) {
+            setStyle({
+                overflow: "auto",
+            });
+            return;
+        }
+        setStyle({});
+    };
+    useLayoutEffect(() => {
+        setHeaderStyle();
+    }, []);
+    useEffect(() => {
+        const resizeFn = () => {
+            setHeaderStyle();
+        };
+        window.addEventListener("resize", resizeFn);
+        return () => {
+            window.removeEventListener("resize", resizeFn);
+        };
+    }, []);
+    useEffect(() => {
+        const element = titleContentRef.current;
+        if (!element||!window.ResizeObserver) return;
+        const observer = new ResizeObserver(() => {
+           setHeaderStyle();
+        });
+        observer.observe(element);
+        return () => {
+          observer.disconnect();
+        }
+    }, []);
+    return style;
+}

package/src/components/HTableBody/HeaderTitle/index.tsx

@@ -1,53 +1,32 @@
-import { Row } from "antd";
 import type { HTableBodyProps } from "../modal";
-import type { DetailedReactHTMLElement } from "react";
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {DetailedReactHTMLElement, useLayoutEffect} from "react";
+import React, { useRef } from "react";
 import { useHTableContext } from "../../context";
 import { useClassName } from "../../hooks";
+import {useHeaderStyle} from "./hooks";
+
 interface IProps {
   headerTitle: HTableBodyProps["headerTitle"];
   contentStyle?: React.CSSProperties;
   rNode?: React.ReactNode;
 }
 export default ({ headerTitle, contentStyle, rNode }: IProps) => {
-  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } =
-    useHTableContext();
+  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } = useHTableContext();
   const bodyRef = useRef<any>();
   const titleContentRef = useRef<any>();
   const rightNodeRef = useRef<any>();
-  const [style, setStyle] = useState({});
   const headerBox = useClassName("hw-table-header-title-box");
   const headerBoxContent = useClassName("hw-table-header-title-box-content");
   const titleClassname = useClassName("hw-table-header-title");
   const rightNodeClassname = useClassName("hw-table-header-right-node");
-  const setHeaderStyle = () => {
-    const headerWidth = bodyRef.current?.clientWidth || 0;
-    const titleWidth = titleContentRef.current?.clientWidth || 0;
-    const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
-    if (rightNodeWidth + titleWidth >= headerWidth) {
-      setStyle({
-        overflow: "auto",
-      });
-      return;
-    }
-    setStyle({});
-  };
-  useLayoutEffect(() => {
-    setHeaderStyle();
-  }, []);
-  useEffect(() => {
-    const resizeFn = () => {
-      setHeaderStyle();
-    };
-    window.addEventListener("resize", resizeFn);
-    return () => {
-      window.removeEventListener("resize", resizeFn);
-    };
-  }, []);
+  const style=useHeaderStyle({
+    bodyRef,
+    titleContentRef,
+    rightNodeRef
+  });
   if (!headerTitle && !rNode) {
     return null;
   }
-
   return (
     <div ref={bodyRef} className={titleClassname} style={contentStyle}>
       <div className={headerBox} style={style}>

package/src/components/HTableBody/RowCheckBox/RowItem.tsx

@@ -1,19 +1,13 @@
 import { useHTableContext } from "../../context";
 import { Checkbox } from "antd";
-import type { HRowSelection } from "../../modal";
+import {RowRadioSelectionProps} from "@/components/HTableBody/modal";
 
-interface RowSelectionBoxProps {
-  data: any;
-  onChange?: HRowSelection["onChange"];
-  getCheckboxProps?: HRowSelection["getCheckboxProps"];
-  index: number;
-}
 export default ({
   data,
   onChange,
   index,
   getCheckboxProps,
-}: RowSelectionBoxProps) => {
+}: RowRadioSelectionProps) => {
   const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
   const { rowData = [], keys = [] } = selectedRowData;
   const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];

package/src/components/HTableBody/RowCheckBox/hooks.ts

@@ -1,7 +1,7 @@
 import type { HTableProps } from "@/components/modal";
 import type { Key } from "react";
 import { useHTableContext } from "@/components/context";
-import type { HRowSelection } from "../../modal";
+import {RowRadioSelectionProps} from '../modal';
 
 const getRowKey = (item: any, index: number, rowKey: HTableProps["rowKey"]) => {
   return typeof rowKey === "function"
@@ -22,7 +22,7 @@ export const useAllChecked = (keys: Key[] = [], data: any[] = []) => {
 
 export const useCheckControl = (
   data: any[] = [],
-  onChange: HRowSelection["onChange"]
+  onChange: RowRadioSelectionProps["onChange"]
 ) => {
   const { rowOnChange, rowKey = "id", allSelectChange } = useHTableContext();
   const allCheck = () => {

package/src/components/HTableBody/RowRadioBoxSelection.tsx

@@ -1,13 +1,7 @@
-import type { HRowSelection } from "@/components/modal";
 import { useHTableContext } from "@/components/context";
 import { Radio } from "antd";
+import {RowRadioSelectionProps} from './modal';
 
-interface RowRadioSelectionProps {
-  data: any;
-  onChange?: HRowSelection["onChange"];
-  getCheckboxProps?: HRowSelection["getCheckboxProps"];
-  index: number;
-}
 export const RowRadioSelection = ({
   data,
   onChange,

package/src/components/HTableBody/hooks/useRowClassName.ts

@@ -0,0 +1,33 @@
+import type { HTableBodyProps } from "@/components/HTableBody/modal";
+import { useHTableContext } from "@/components/context";
+import { useContext } from "react";
+import { ConfigProvider } from "antd";
+import type { RowClassName } from "rc-table/lib/interface";
+import { useHTableConfigContext } from "@/components/TableConfig";
+
+export default ({
+  rowClassName,
+  rowKey = "id",
+}: HTableBodyProps): RowClassName<any> => {
+  const { selectedRowData } = useHTableContext();
+  const { defaultSelectedRowClassName } = useHTableConfigContext({});
+  const { keys = [] } = selectedRowData;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  return (record: any, index: number, indent: number) => {
+    const key =
+      typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
+    const propsRowClassName =
+      typeof rowClassName === "function"
+        ? rowClassName(record, index, indent)
+        : rowClassName;
+    const relPropsRowClassName = propsRowClassName || "";
+    if (keys?.indexOf(key) === -1) {
+      return relPropsRowClassName;
+    }
+    if (typeof defaultSelectedRowClassName === "undefined") {
+      return `${getPrefixCls("table-row-selected")} ${relPropsRowClassName}`;
+    }
+    return `${defaultSelectedRowClassName || ""} ${relPropsRowClassName}`;
+  };
+};

package/src/components/HTableBody/index.tsx

@@ -17,8 +17,7 @@ import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
 import { errorDefaultRender, emptyDefaultRender } from "./defaultRender";
 import type { HTableBodyProps } from "./modal";
-import { useContext } from "react";
-const { ConfigContext } = ConfigProvider;
+import useRowClassName from "@/components/HTableBody/hooks/useRowClassName";
 
 export default (bodyProps: HTableBodyProps) => {
   const {
@@ -110,9 +109,7 @@ export default (bodyProps: HTableBodyProps) => {
     table: tableInstance,
     localSorter,
   });
-  const { keys = [], selectAll } = selectedRowData;
-  const { getPrefixCls } = useContext(ConfigContext);
-
+  const rowClassNameFn = useRowClassName(bodyProps);
   return (
     <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
       <Space size={16} direction={"vertical"} style={{ width: "100%" }}>
@@ -134,22 +131,7 @@ export default (bodyProps: HTableBodyProps) => {
         >
           <ProTable
             {...props}
-            rowClassName={(record, index, indent) => {
-              const key =
-                typeof rowKey === "function"
-                  ? rowKey(record, index)
-                  : record[rowKey];
-              const propsRowClassName =
-                typeof rowClassName === "function"
-                  ? rowClassName(record, index, indent)
-                  : rowClassName;
-              if (keys?.indexOf(key) !== -1) {
-                return `${getPrefixCls(
-                  "table-row-selected"
-                )} ${propsRowClassName}`;
-              }
-              return propsRowClassName;
-            }}
+            rowClassName={(rowClassNameFn as any)}
             bordered={bordered}
             columnsState={{
               ...selfColStatus,

package/src/components/HTableBody/modal.ts

@@ -1,5 +1,5 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import type React from "react";
+import React, {Key} from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type {
   ActionRenderFn,
@@ -39,3 +39,10 @@ export interface HTableBodyProps
   table?: HTableInstance;
   pagination?: IPaginationProps | false;
 }
+
+export interface RowRadioSelectionProps {
+  data: any;
+  onChange?:(keys:Key[],data:any[])=>void;
+  getCheckboxProps?: HRowSelection["getCheckboxProps"];
+  index: number;
+}

package/src/components/HTableBody/utils.ts

@@ -91,3 +91,8 @@ export const outColSetting = (
     keys,
   };
 };
+interface RowItemFnModal {}
+
+export const rowItemFn = (action, record, index) => {
+  return typeof action === "function" ? action(record, index) : record[action];
+};

package/src/components/TableConfig.tsx

@@ -8,6 +8,7 @@ interface HTableConfigContextModal {
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;
   valueTypeConfig?: ValueTypeConfigModal;
+  defaultSelectedRowClassName?: string | null;
 }
 export const HTableConfigContext =
   React.createContext<HTableConfigContextModal | null>(null);
@@ -26,6 +27,7 @@ export const useHTableConfigContext = ({
     tableStyle: configTableStyle,
     paginationStyle: configPaginationStyle,
     valueTypeConfig = {},
+    defaultSelectedRowClassName,
   } = useContext(HTableConfigContext) || {};
 
   return {
@@ -35,6 +37,7 @@ export const useHTableConfigContext = ({
     tableStyle: tableStyle || configTableStyle,
     paginationStyle: paginationStyle || configPaginationStyle,
     valueTypeConfig,
+    defaultSelectedRowClassName,
   };
 };
 const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {

package/src/components/hooks/useRowObj.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import { useMemo, useState } from "react";
+import {  useState } from "react";
 import type { RowObj } from "../modal";
 import type { HRowSelection } from "../modal";
 

package/src/components/modal.ts

@@ -5,7 +5,7 @@ import type {
   HFormInstance,
 } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import type React from "react";
+import React, {Key} from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
@@ -54,7 +54,9 @@ interface BcItemModal {
 export type ConfigItemModal = Omit<HItemProps, "render" | "type"> &
   HColumns &
   BcItemModal;
+
 export type ConfigDataModal = ConfigItemModal[];
+
 export type ActionRenderFn = (
   selectedRowKeys: RowObj,
   tableInstance: HTableInstance
@@ -65,9 +67,12 @@ export type FooterBtnRenderFn = (
   selectedRowKeys: RowObj,
   setAllCheck: (row: RowObj) => void
 ) => React.ReactNode;
+
 export type actionFn = (...arg) => void;
+
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
+  onChange?:(keys:Key[],data:any[])=>void;
 }
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {

package/src/pages/Table/index.tsx

@@ -77,6 +77,7 @@ const maker = (name) => {
 };
 export default () => {
   const hTable = useHTable();
+  const [width,setWidth]=useState(0);
   const { loading, data } = useRequest(() => {
     const arrayData: any[] = [];
     for (let i = 0; i < 10; i = i + 1) {
@@ -121,73 +122,65 @@ export default () => {
         >
           获取
         </div>
-        <HTable
-          configData={configData}
-          rowKey={(rowData, index) => {
-            return index;
-          }}
-          table={hTable}
-          labelWidth={88}
-          action={{
-            test: (params) => {
-              console.log(params, "lllll");
-            },
-          }}
-          rowSelection={{
-            preserveSelectedRowKeys: true,
-          }}
-          affixProps={{
-            target: () => document.querySelector(".body"),
-          }}
-          scroll={{
-            x: 1000,
-          }}
-          columnsState={{
-            persistenceKey: "test",
-            persistenceType: "localStorage",
-          }}
-          formInitValues={{
-            deviceType: "1",
-          }}
-          dataSource={[{}, {}, {}]}
-          headerTitle={
-            <Space size={8}>
-              <div style={{ width: 1000 }}>
+        <HTableConfig defaultSelectedRowClassName={null}>
+          <HTable
+            configData={configData}
+            rowKey={(rowData, index) => {
+              return index;
+            }}
+            table={hTable}
+            labelWidth={88}
+            action={{
+              test: (params) => {
+                console.log(params, "lllll");
+              },
+            }}
+            rowSelection={{
+              preserveSelectedRowKeys: true,
+            }}
+            affixProps={{
+              target: () => document.querySelector(".body"),
+            }}
+            scroll={{
+              x: 1000,
+            }}
+            columnsState={{
+              persistenceKey: "test",
+              persistenceType: "localStorage",
+            }}
+            formInitValues={{
+              deviceType: "1",
+            }}
+            dataSource={[{}, {}, {}]}
+            headerTitle={
+              <Space size={8}>
                 <Button
-                  onClick={() => {
-                    console.log(hTable.table.getColSettingKeys());
-                  }}
+                    onClick={() => {
+                      setTimeout(()=>{
+                        setWidth(1000);
+                      },1000)
+                      console.log(hTable.table.getColSettingKeys());
+                    }}
                 >
                   操作
                 </Button>
-              </div>
-              <Button
-                onClick={() => {
-                  console.log(hTable.table.getColSettingKeys());
-                }}
-              >
-                操作
-              </Button>
-              <Button
-                onClick={() => {
-                  console.log(hTable.table.getColSettingKeys());
-                }}
-              >
-                操作
-              </Button>
-            </Space>
-          }
-          options={{
-            settingRender: () => {
-              return (
-                <Tooltip title="321312312312321">
-                  <SettingOutlined width={24} />
-                </Tooltip>
-              );
-            },
-          }}
-          pagination={false}
-        />
+               <div>
+                 <div style={{width,height:50,backgroundColor:"red"}}></div>
+               </div>
+              </Space>
+            }
+            options={{
+              settingRender: () => {
+                return (
+                  <Tooltip title="321312312312321">
+                    <SettingOutlined width={24} />
+                  </Tooltip>
+                );
+              },
+            }}
+            pagination={false}
+          />
+        </HTableConfig>
       </div>
     </HFormConfigProvider>
   );