模型表结构表头拖拉

src/view/Manage/Model/Component/ImportActionTable.jsx

 import React, { useState, useCallback, useRef, useEffect, useContext, useMemo } from 'react';
-import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Table, Pagination, Space } from 'antd';
+import { Input, Form, Typography, Button, Select, Row, Col, Popover, Checkbox, Tooltip, Pagination, Space } from 'antd';
 import { CheckOutlined, PlusOutlined, QuestionCircleOutlined, DeleteOutlined } from '@ant-design/icons';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -18,6 +18,7 @@ import Suggest from './suggest';
 import { AttentionSvg, UnAttentionSvg } from './ModelSvg';
 import { EditModelContext } from './ContextManage';
 import { ValidateTip } from './ImportActionHeader';
+import Table from '../../ResizeableTable';
 
 import './ImportActionHeader.less';
 import './ImportActionTable.less';
@@ -32,36 +33,6 @@ const MENU_ID = 'model-attribute-menu';
 
 export const InputDebounce = DebounceInput(300)(Input);
 
-const ResizeableHeaderCell = props => {
-  const { onResize, width, onClick, ...restProps } = props;
-
-  if (!width) {
-    return <th {...restProps} />;
-  }
-
-  return (
-    <Resizable
-      width={width}
-      height={0}
-      handle={
-        <span
-          className="react-resizable-handle"
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        />
-      }
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
-    >
-      <th
-        onClick={onClick}
-        {...restProps}
-      />
-    </Resizable>
-  );
-};
-
 export const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
   const onNameChange = (value) => {
@@ -453,7 +424,6 @@ export const ImportActionTable = (props) => {
       dataIndex: 'definition',
       editable: true,
       ellipsis: true,
-      width: 200,
       render: (text, record, __) => {
         return (
           <React.Fragment>
@@ -1029,30 +999,6 @@ export const ImportActionTable = (props) => {
     }
   }
 
-  const handleResize = index => (e, { size }) => {
-    const nextColumns = [...columns];
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
-    };
-
-    setColumns(nextColumns);
-  };
-
-  const resizeColumns = () => {
-    return (
-      columns.map((column, index) => { 
-        return {
-          ...column,
-          onHeaderCell: column => ({
-            width: column.width,
-            onResize: handleResize(index),
-          }),
-        };
-      })
-    );
-  }
-
   return (
     <div className='model-import-action-table' id='model-import-action-table'>
       <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
@@ -1101,9 +1047,6 @@ export const ImportActionTable = (props) => {
             <Form form={form} component={false} onValuesChange={onValuesChange}>
               <Table
                 components={{
-                  header: {
-                    cell: ResizeableHeaderCell,
-                  },
                   body: {
                     cell: EditableCell,
                     //编辑或者搜索状态下不允许拖动
@@ -1167,16 +1110,10 @@ export const ImportActionTable = (props) => {
                   return rowParams;
                 }}
                 dataSource={filterPageData||[]}
-                columns={resizeColumns()}
+                columns={columns??[]}
                 size='small'
                 rowKey='iid'
                 pagination={false}
-                sticky
-                scroll={{
-                  x: 1500,
-                  //解决屏幕尺寸窄时,字段不好横向拖动的问题
-                  y: tableWidth>1500?'100%':630,
-                }}
               />
             </Form>
           </DndProvider>

src/view/Manage/ResizeableTable/index.jsx

@@ -36,7 +36,7 @@ const ResizeableHeaderCell = props => {
 };
 
 const ResizeableTable = (props) => {
-  const { columns, extraColWidth = 0, ...restProps } = props
+  const { columns, extraColWidth = 0, components, ...restProps } = props
 
   const [tableWidth, setTableWidth] = useState(0)
 
@@ -94,7 +94,8 @@ const ResizeableTable = (props) => {
         components={{
           header: {
             cell: ResizeableHeaderCell,
-          }
+          },
+          ...components,
         }}
         columns={cols1}
         { ...restProps }