修改ts类型

src/apollo-table/component/Cell.tsx

 import React from 'react';
 import { message, Popover, Modal } from 'antd';
-
 import { config } from './config';
 import style from './Cell.less';
 import _ from 'lodash';

src/apollo-table/component/Column.tsx

@@ -8,6 +8,9 @@ export default class TableColumn extends PureComponent<ColumnProps> {
 
     render() {
         let { type, title, width = 200, columnAttrObj = {} } = this.props;
+        if(!config[String(type)]){
+            type='1';
+        }
         let icon = config[String(type)] && config[String(type)].icon;
         if (String(type) === '13' && !columnAttrObj.isMultiple) {
             icon = 'iconziduan-lianxiangdanxuan';

src/apollo-table/component/EditCell.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { EditCellProps, EditCellState } from './interface';
 import FormHelper from '../utils/formHelper';
 
-const formatData = (columns: [], rowData: [], noEdit?: boolean) => {
+const formatData = (columns: any[], rowData: any[], noEdit?: boolean) => {
     const temp: any[] = [];
     columns.forEach((item: any) => {
         const value: any = rowData.find((itemData: any) => {
@@ -17,14 +17,14 @@ const formatData = (columns: [], rowData: [], noEdit?: boolean) => {
     });
     return temp;
 };
-const formHelp = (columns: [], record: any, item: any) => {
+const formHelp = (columns: any[], record: any, item: any) => {
     const list = formatData(columns, record.rowData);
     const itemsConfig = FormHelper.getFormData({ list, rowLocked: record.isLocked });
     return itemsConfig.find((temp: any) => {
         return temp.columnName === item.columnName;
     });
 };
-export default class EditCell extends React.Component {
+export default class EditCell extends React.Component<EditCellProps, EditCellState> {
     static getDerivedStateFromProps(nextProps: EditCellProps, prevState: EditCellState) {
         const { prevProps } = prevState;
         let columnConfig = formHelp(nextProps.columns, nextProps.rowData, nextProps.columnConfig);

src/apollo-table/component/Table.tsx

@@ -13,6 +13,10 @@ import IconFont from './base/extra/iconFont';
 import scrollbarSize from '../utils/scrollbarSize';
 
 export default class AirTable extends Component<TableProps, TableState> {
+    private indexCount: any;
+    config: any;
+    memoizeLeftCount: Function;
+    memoizeData: Function;
     static getDerivedStateFromProps(nextProps: TableProps, prevState: TableState) {
         const { prevProps } = prevState;
         let nextState: TableState = {
@@ -144,7 +148,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         const flag = this.getCheckedAll();
         let result = [];
         if (flag) {
-            result = temp.concat(dataSource).filter((v:any) => {
+            result = temp.concat(dataSource).filter((v: any) => {
                 return (
                     temp.some((item: any) => {
                         return item.id === v.id;
@@ -170,7 +174,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 下拉加载
     onScrollRow = ({ clientHeight, scrollTop }: any) => {
         const height = clientHeight + scrollTop || 0;
-        const { dataSource = [],  } = this.state;
+        const { dataSource = [] } = this.state;
         const { rowHeight } = this.config;
         const { onScroll } = this.props;
         const offset = 100;
@@ -183,7 +187,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     renderHeaderCell = ({ columnIndex, key, rowIndex, style }: any) => {
         const { columns } = this.state;
         if (columns.length === 0) return null;
-        const { columnType, columnChsName, width } = columns[columnIndex] || {};
+        const { columnType, columnChsName, width, columnAttrObj } = columns[columnIndex] || {};
         if (columnIndex === 0) {
             return (
                 <div key={key} className={styles.leftHeaderCell} style={{ ...style, width: width || 200 }}>
@@ -191,14 +195,14 @@ export default class AirTable extends Component<TableProps, TableState> {
                         <Checkbox checked={this.getCheckedAll()} onClick={this.changeCheckboxAll} />
                     </div>
                     <div className={styles.cellContent}>
-                        <Column type={String(columnType)} title={columnChsName} width={width} />
+                        <Column type={String(columnType)} title={columnChsName} width={width} columnAttrObj={columnAttrObj} />
                     </div>
                 </div>
             );
         }
         return (
             <div className={styles.leftHeaderCell} key={key} style={{ ...style, width: width || 200 }}>
-                <Column type={String(columnType)} title={columnChsName} width={width} />
+                <Column type={String(columnType)} title={columnChsName} width={width} columnAttrObj={columnAttrObj} />
             </div>
         );
     };
@@ -239,7 +243,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         const {
             updateData,
             hasGroup,
-            showForm=()=>{},
+            showForm = () => {},
             delData,
             getData,
             extraMenu,
@@ -248,7 +252,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             noDel,
             tableId,
             flush,
-            showHistory=()=>{},
+            showHistory = () => {},
         } = this.props;
         if (columns.length === 0 || data.length === 0) {
             return;
@@ -346,7 +350,11 @@ export default class AirTable extends Component<TableProps, TableState> {
                             >
                                 {filterRowData.groupHistoryCount && filterRowData.groupHistoryCount > 1 && (
                                     <span className={styles.countNo}>
-                                        {`(${filterRowData.groupHistoryCount > 99 ? '99+' : filterRowData.groupHistoryCount})`}
+                                        {`(${
+                                            filterRowData.groupHistoryCount > 99
+                                                ? '99+'
+                                                : filterRowData.groupHistoryCount
+                                        })`}
                                     </span>
                                 )}
                             </div>
@@ -491,8 +499,10 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     <AutoSizer disableHeight>
                                         {({ width }: any) => {
                                             // 如果列太少不满一屏时，列头宽度按列计算
-                                            const headerWidth:number = columnWidth * columnCount < width ? columnWidth * columnCount : width;
-                                           return ( <div>
+                                            const headerWidth: number =
+                                                columnWidth * columnCount < width ? columnWidth * columnCount : width;
+                                            return (
+                                                <div>
                                                     {
                                                         //右侧表头
                                                         <div
@@ -542,7 +552,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                                 height={height}
                                                                 onScroll={(...arg: Array<Object>) => {
                                                                     onScroll(...arg);
-                                                                this.onScrollRow(...arg);
+                                                                    this.onScrollRow(arg[0]);
                                                                 }}
                                                                 cellRenderer={this.renderBodyCell.bind(this, data)}
                                                                 columns={columns}
@@ -552,7 +562,8 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                         </div>
                                                     }
                                                 </div>
-                                        )}}
+                                            );
+                                        }}
                                     </AutoSizer>
                                 </div>
                             </div>

src/apollo-table/component/base/config.tsx

@@ -12,135 +12,135 @@ export const config: any = {
         detail: require('./detail/input').default,
         icon: require('../../assets/type/text.png'),
     },
-    '2': {
-        name: '模糊搜索单选',
-        component: require('./edit/search').default,
-        getFormatter: GetFormatter['SEARCH'],
-        setFormatter: SetFormatter['SEARCH'],
-        componentAttr: {
-            allowClear: true,
-        },
-        detail: require('./detail/search').default,
-    },
-    '3': {
-        name: '多行文本',
-        component: require('./edit/textarea').default,
-        getFormatter: GetFormatter['TEXTAREA'],
-        setFormatter: SetFormatter['TEXTAREA'],
-        componentAttr: {
-            autosize: { minRows: 3 },
-        },
-        detail: require('./detail/textarea').default,
-    },
-    '4': {
-        name: '附件上传',
-        component: require('./edit/upload').default,
-        getFormatter: GetFormatter['UPLOAD'],
-        setFormatter: SetFormatter['UPLOAD'],
-        detail: require('./detail/upload').default,
-    },
-    '5': {
-        name: '复选',
-        component: require('./edit/checkbox').default, // 暂未添加
-        getFormatter: GetFormatter['CHECKBOX'],
-        setFormatter: SetFormatter['CHECKBOX'],
-        detail: require('./detail/checkbox').default,
-    },
-    '6': {
-        name: '下拉单选',
-        component: require('./edit/select').default,
-        componentAttr: {
-            labelInValue: true,
-            allowClear: true,
-        },
-        getFormatter: GetFormatter['SELECT'],
-        setFormatter: SetFormatter['SELECT'],
-        detail: require('./detail/select').default,
-    },
-    '7': {
-        name: '下拉多选',
-        component: require('./edit/multiple-select').default,
-        componentAttr: {
-            labelInValue: true,
-            mode: 'tags',
-            maxTagCount: 3,
-        },
-        getFormatter: GetFormatter['MULTIPLE_SELECT'],
-        setFormatter: SetFormatter['MULTIPLE_SELECT'],
-        detail: require('./detail/multiple-select').default,
-    },
-    '8': {
-        name: '评级',
-        component: require('./edit/rate').default,
-        componentAttr: {
-            allowClear: true,
-            character: <Icon type="like" theme="filled" />,
-        },
-        getFormatter: GetFormatter['RATE'],
-        setFormatter: SetFormatter['RATE'],
-        detail: require('./detail/rate').default,
-    },
-    '9': {
-        name: '数字输入',
-        component: require('./edit/number').default,
-        componentAttr: {
-            precision: 2,
-        },
-        setFormatter: SetFormatter['NUMBER'],
-        getFormatter: GetFormatter['NUMBER'],
-        detail: require('./detail/number').default,
-    },
-    '10': {
-        name: '百分比',
-        component: require('./edit/percentage').default, // 暂未添加
-        setFormatter: SetFormatter['PERCENTAGE'],
-        getFormatter: GetFormatter['PERCENTAGE'],
-        detail: require('./detail/percentage').default,
-    },
-    '11': {
-        name: '日期',
-        component: require('./edit/date').default,
-        componentAttr: {
-            format: formatStr,
-            showTime: true,
-        },
-        getFormatter: GetFormatter['DATE'],
-        setFormatter: SetFormatter['DATE'],
-        detail: require('./detail/date').default,
-    },
-    '12': {
-        name: '引用',
-        component: require('./edit/link').default, // 暂未添加
-        getFormatter: GetFormatter['LINK'],
-        setFormatter: SetFormatter['LINK'],
-        detail: require('./detail/link').default,
-    },
-    '13': {
-        name: '模糊搜索多选',
-        component: require('./edit/multiple-search').default,
-        getFormatter: GetFormatter['MULTIPLE_SEARCH'],
-        setFormatter: SetFormatter['MULTIPLE_SEARCH'],
-        componentAttr: {
-            allowClear: true,
-        },
-        detail: require('./detail/multiple-search').default,
-    },
-    '14': {
-        name: '树组件',
-        component: require('./edit/tree-select').default,
-        placeholder: '请选择',
-        getFormatter: GetFormatter['TREE_SELECT'],
-        setFormatter: SetFormatter['TREE_SELECT'],
-        detail: require('./detail/tree-select').default,
-    },
-    '15': {
-        name: '文本选择',
-        component: require('./edit/text-select').default,
-        getFormatter: GetFormatter['TEXT_SELECT'],
-        setFormatter: SetFormatter['TEXT_SELECT'],
-        componentAttr: {
-            allowClear: true,
-        },
-        detail: require('./detail/text-select').default,
-    },
+    // '2': {
+    //     name: '模糊搜索单选',
+    //     component: require('./edit/search').default,
+    //     getFormatter: GetFormatter['SEARCH'],
+    //     setFormatter: SetFormatter['SEARCH'],
+    //     componentAttr: {
+    //         allowClear: true,
+    //     },
+    //     detail: require('./detail/search').default,
+    // },
+    // '3': {
+    //     name: '多行文本',
+    //     component: require('./edit/textarea').default,
+    //     getFormatter: GetFormatter['TEXTAREA'],
+    //     setFormatter: SetFormatter['TEXTAREA'],
+    //     componentAttr: {
+    //         autosize: { minRows: 3 },
+    //     },
+    //     detail: require('./detail/textarea').default,
+    // },
+    // '4': {
+    //     name: '附件上传',
+    //     component: require('./edit/upload').default,
+    //     getFormatter: GetFormatter['UPLOAD'],
+    //     setFormatter: SetFormatter['UPLOAD'],
+    //     detail: require('./detail/upload').default,
+    // },
+    // '5': {
+    //     name: '复选',
+    //     component: require('./edit/checkbox').default, // 暂未添加
+    //     getFormatter: GetFormatter['CHECKBOX'],
+    //     setFormatter: SetFormatter['CHECKBOX'],
+    //     detail: require('./detail/checkbox').default,
+    // },
+    // '6': {
+    //     name: '下拉单选',
+    //     component: require('./edit/select').default,
+    //     componentAttr: {
+    //         labelInValue: true,
+    //         allowClear: true,
+    //     },
+    //     getFormatter: GetFormatter['SELECT'],
+    //     setFormatter: SetFormatter['SELECT'],
+    //     detail: require('./detail/select').default,
+    // },
+    // '7': {
+    //     name: '下拉多选',
+    //     component: require('./edit/multiple-select').default,
+    //     componentAttr: {
+    //         labelInValue: true,
+    //         mode: 'tags',
+    //         maxTagCount: 3,
+    //     },
+    //     getFormatter: GetFormatter['MULTIPLE_SELECT'],
+    //     setFormatter: SetFormatter['MULTIPLE_SELECT'],
+    //     detail: require('./detail/multiple-select').default,
+    // },
+    // '8': {
+    //     name: '评级',
+    //     component: require('./edit/rate').default,
+    //     componentAttr: {
+    //         allowClear: true,
+    //         character: <Icon type="like" theme="filled" />,
+    //     },
+    //     getFormatter: GetFormatter['RATE'],
+    //     setFormatter: SetFormatter['RATE'],
+    //     detail: require('./detail/rate').default,
+    // },
+    // '9': {
+    //     name: '数字输入',
+    //     component: require('./edit/number').default,
+    //     componentAttr: {
+    //         precision: 2,
+    //     },
+    //     setFormatter: SetFormatter['NUMBER'],
+    //     getFormatter: GetFormatter['NUMBER'],
+    //     detail: require('./detail/number').default,
+    // },
+    // '10': {
+    //     name: '百分比',
+    //     component: require('./edit/percentage').default, // 暂未添加
+    //     setFormatter: SetFormatter['PERCENTAGE'],
+    //     getFormatter: GetFormatter['PERCENTAGE'],
+    //     detail: require('./detail/percentage').default,
+    // },
+    // '11': {
+    //     name: '日期',
+    //     component: require('./edit/date').default,
+    //     componentAttr: {
+    //         format: formatStr,
+    //         showTime: true,
+    //     },
+    //     getFormatter: GetFormatter['DATE'],
+    //     setFormatter: SetFormatter['DATE'],
+    //     detail: require('./detail/date').default,
+    // },
+    // '12': {
+    //     name: '引用',
+    //     component: require('./edit/link').default, // 暂未添加
+    //     getFormatter: GetFormatter['LINK'],
+    //     setFormatter: SetFormatter['LINK'],
+    //     detail: require('./detail/link').default,
+    // },
+    // '13': {
+    //     name: '模糊搜索多选',
+    //     component: require('./edit/multiple-search').default,
+    //     getFormatter: GetFormatter['MULTIPLE_SEARCH'],
+    //     setFormatter: SetFormatter['MULTIPLE_SEARCH'],
+    //     componentAttr: {
+    //         allowClear: true,
+    //     },
+    //     detail: require('./detail/multiple-search').default,
+    // },
+    // '14': {
+    //     name: '树组件',
+    //     component: require('./edit/tree-select').default,
+    //     placeholder: '请选择',
+    //     getFormatter: GetFormatter['TREE_SELECT'],
+    //     setFormatter: SetFormatter['TREE_SELECT'],
+    //     detail: require('./detail/tree-select').default,
+    // },
+    // '15': {
+    //     name: '文本选择',
+    //     component: require('./edit/text-select').default,
+    //     getFormatter: GetFormatter['TEXT_SELECT'],
+    //     setFormatter: SetFormatter['TEXT_SELECT'],
+    //     componentAttr: {
+    //         allowClear: true,
+    //     },
+    //     detail: require('./detail/text-select').default,
+    // },
 };

src/apollo-table/component/base/detail/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { config } from '../config';
 import styles from './styles.less';
 import { transferAttr } from '../_utils/transferAttr';
-import { BaseComponentProps } from '../../../component/interface';
+import { BaseComponentProps } from '../../interface';
 import Text from './input';
 
 // 此方法为高阶组件,不应再render里面频繁调用,防止频繁实例化,带来性能上的浪费
@@ -32,7 +32,6 @@ export const getDetail = (type: string) => {
                         componentAttr={transferColumn}
                         formatter={NodeObj.getFormatter}
                         value={value}
-                        onChange={this.onChange}
                     />
                 </div>
             );

src/apollo-table/component/base/detail/input/index.tsx

 import React from 'react';
 import styles from './index.less';
-import {BaseComponentProps} from '@/apollo-table/component/interface';
+import {BaseComponentProps} from '../../../interface';
 
 export default function Detail(props:BaseComponentProps) {
     const value = props.formatter ? props.formatter(props.value) : props.value;

src/apollo-table/component/base/edit/editInterface.tsx

 export interface CommonProps {
     columnConfig: any;
+    placeholder?:string;
     formatter?: Function;
     onChange?: Function;
 }

src/apollo-table/component/base/edit/input/index.tsx

@@ -4,11 +4,12 @@ import styles from './styles.less';
 import { InputProps } from '../editInterface';
 
 export default function(props: InputProps) {
-    const { value, maxLength } = props;
+    const { value, maxLength, placeholder } = props;
+    const inputProps = { value, maxLength, placeholder };
 
     return (
         <div className={styles.container}>
-            <Input className={styles.input} {...props} />
+            <Input className={styles.input} {...inputProps} />
             {maxLength && (
                 <span className={styles.wordNumber}>
                     已输入{(value || '').length || 0}/{maxLength}

src/apollo-table/component/base/index.tsx

@@ -45,7 +45,7 @@ export const getComponent = (type: string) => {
         }
         return newValue;
     };
-    const com = class extends React.Component {
+    const com: any = class Base extends React.Component<BaseComponentProps, BaseComponentState> {
         static getDerivedStateFromProps(nextProps: BaseComponentProps, prevState: BaseComponentState) {
             const { prevProps } = prevState;
 
@@ -90,7 +90,7 @@ export const getComponent = (type: string) => {
 
         render() {
             const { ...others } = this.props;
-            const { columnConfig } = this.props;
+            const { columnConfig, value } = this.state;
             const { columnAttrObj, columnType } = columnConfig || {};
             let transferColumn = transferAttr(columnType, {
                 ...(NodeObj.componentAttr || {}),
@@ -100,7 +100,7 @@ export const getComponent = (type: string) => {
                 ...others,
                 ...(transferColumn || {}),
             };
-            return <Node {...newProps} value={this.state.value} onChange={this.onChange} />;
+            return <Node {...newProps} value={value} onChange={this.onChange} />;
         }
     };
     com.Detail = getDetail(type);

src/apollo-table/component/config.ts

@@ -6,75 +6,75 @@ export const config:any = {
         component: getComponent('1'),
         icon: 'iconziduan-danhangwenben',
     },
-    '2': {
-        name: '超链接',
-        component: getComponent('2'),
-        icon: 'iconziduan-chaolianjie',
-    },
-    '3': {
-        name: '多行文本',
-        component: getComponent('3'),
-        icon: 'iconziduan-duohangwenben',
-    },
-    '4': {
-        name: '附件上传',
-        component: getComponent('4'),
-        icon: 'iconziduan-fujian',
-    },
-    '5': {
-        name: '复选',
-        component: getComponent('5'),
-        icon: 'iconziduan-fuxuan',
-    },
-    '6': {
-        name: '下拉单选',
-        component: getComponent('6'),
-        icon: 'iconziduan-xiala',
-    },
-    '7': {
-        name: '下拉多选',
-        component: getComponent('7'),
-        icon: 'iconziduan-xialaduoxuan',
-    },
-    '8': {
-        name: '评级',
-        component: getComponent('8'),
-        icon: 'iconziduan-pingji',
-    },
-    '9': {
-        name: '数字输入',
-        component: getComponent('9'),
-        icon: 'iconziduan-shuzi',
-    },
-    '10': {
-        name: '百分比',
-        component: getComponent('10'),
-        icon: 'iconziduan-baifenbi',
-    },
-    '11': {
-        name: '日期',
-        component: getComponent('11'),
-        icon: 'iconziduan-riqi',
-    },
-    '12': {
-        name: '引用',
-        component: getComponent('12'),
-        icon: 'iconziduan-yinyong',
-    },
-    '13': {
-        name: '模糊搜索多选',
-        component: getComponent('13'),
-        icon: 'iconziduan-lianxiangduoxuan',
-    },
-    '14': {
-        name: '树结构',
-        component: getComponent('14'),
-        icon: 'iconziduan-ren',
-    },
-    '15': {
-        name: '文本搜索框',
-        component: getComponent('15'),
-        icon: 'iconziduan-lianxiangdanxuan',
-    },
+    // '2': {
+    //     name: '超链接',
+    //     component: getComponent('2'),
+    //     icon: 'iconziduan-chaolianjie',
+    // },
+    // '3': {
+    //     name: '多行文本',
+    //     component: getComponent('3'),
+    //     icon: 'iconziduan-duohangwenben',
+    // },
+    // '4': {
+    //     name: '附件上传',
+    //     component: getComponent('4'),
+    //     icon: 'iconziduan-fujian',
+    // },
+    // '5': {
+    //     name: '复选',
+    //     component: getComponent('5'),
+    //     icon: 'iconziduan-fuxuan',
+    // },
+    // '6': {
+    //     name: '下拉单选',
+    //     component: getComponent('6'),
+    //     icon: 'iconziduan-xiala',
+    // },
+    // '7': {
+    //     name: '下拉多选',
+    //     component: getComponent('7'),
+    //     icon: 'iconziduan-xialaduoxuan',
+    // },
+    // '8': {
+    //     name: '评级',
+    //     component: getComponent('8'),
+    //     icon: 'iconziduan-pingji',
+    // },
+    // '9': {
+    //     name: '数字输入',
+    //     component: getComponent('9'),
+    //     icon: 'iconziduan-shuzi',
+    // },
+    // '10': {
+    //     name: '百分比',
+    //     component: getComponent('10'),
+    //     icon: 'iconziduan-baifenbi',
+    // },
+    // '11': {
+    //     name: '日期',
+    //     component: getComponent('11'),
+    //     icon: 'iconziduan-riqi',
+    // },
+    // '12': {
+    //     name: '引用',
+    //     component: getComponent('12'),
+    //     icon: 'iconziduan-yinyong',
+    // },
+    // '13': {
+    //     name: '模糊搜索多选',
+    //     component: getComponent('13'),
+    //     icon: 'iconziduan-lianxiangduoxuan',
+    // },
+    // '14': {
+    //     name: '树结构',
+    //     component: getComponent('14'),
+    //     icon: 'iconziduan-ren',
+    // },
+    // '15': {
+    //     name: '文本搜索框',
+    //     component: getComponent('15'),
+    //     icon: 'iconziduan-lianxiangdanxuan',
+    // },
 };
 export default config;

src/apollo-table/component/index.tsx

 import React from 'react';
-import * as PropTypes from 'prop-types';
 import styles from './index.less';
 import { CommonProps, CommonState } from './interface';
 import Table from './Table';
-import Data from './data';
 
-const {cols,list} = Data;
 class AirTable extends React.Component<CommonProps, CommonState> {
-    static propTypes = {
-        dataSource: PropTypes.array,
-        columns: PropTypes.array,
-        tableId: PropTypes.number,
-    };
-    static defaultProps = {
-        dataSource: list,
-        columns: cols,
-        tableId: 1,
-    };
-
     static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
         const { prevProps } = prevState;
 
@@ -39,22 +25,29 @@ class AirTable extends React.Component<CommonProps, CommonState> {
 
     constructor(props: CommonProps) {
         super(props);
-
-        const { columns, dataSource, tableId } = props;
-
         this.state = {
-            columns,
-            dataSource,
-            tableId,
             prevProps: props,
+            columns: [],
+            dataSource: [],
+            tableId: 1,
         };
     }
+
+    onScroll = () => {};
+
     render() {
         const { columns, dataSource, tableId } = this.state;
+        const operateConfig = {};
         return (
             <div className={styles.container}>
                 <div className={styles.tableContainer}>
-                    <Table columns={columns} dataSource={dataSource} tableId={tableId} />
+                    <Table
+                        columns={columns}
+                        dataSource={dataSource}
+                        tableId={tableId}
+                        onScroll={this.onScroll}
+                        operateConfig={operateConfig}
+                    />
                 </div>
             </div>
         );

src/apollo-table/component/interface.tsx

 import React from 'react';
 
 export interface CommonProps {
-    columns?: [];
-    dataSource?: [];
-    tableId?: number;
-    checked?: [];
+    columns: any[];
+    dataSource: any[];
+    tableId: number;
+    checked?: any[];
     columnWidth?: number;
 }
 
 export interface CommonState {
     prevProps: CommonProps;
-    columns?: [];
-    dataSource?: [];
-    tableId?: number;
-    checked?: [];
+    columns: any[];
+    dataSource: any[];
+    tableId: number;
+    checked?: any[];
     columnWidth?: number;
 }
 
-export interface TableProps extends CommonProps {}
+export interface TableProps extends CommonProps {
+    onScroll: Function;
+    operateConfig: any;
+    changeChecked?: Function;
+    hasGroup?: boolean;
+    updateData?: Function;
+    showForm?: Function;
+    showHistory?: Function;
+    delData?: Function;
+    getData?: Function;
+    flush?: Function;
+    extraMenu?: any;
+    noAdd?: boolean;
+    noEdit?: boolean;
+    noDel?: boolean;
+}
 
 export interface TableState extends CommonState {
     prevProps: TableProps;
+    height: number;
 }
 export interface ColumnProps {
     type: string;
     title: string;
     width?: number;
+    columnAttrObj?: any;
 }
 
 export interface BaseComponentProps {
-    value: [];
+    value: any[] | undefined;
     columnConfig: any;
     formatter?: Function;
     onChange?: Function;
+    changeParams?: Function;
 }
 export interface BaseComponentState {
     prevProps: BaseComponentProps;
-    value: [];
+    value: any[] | undefined;
     columnConfig: any;
 }
 export interface CellProps {
-    columns: [];
+    columns: any[];
     columnConfig: any;
-    rowData: [];
-    cellData: [];
+    rowData: any;
+    cellData: any;
+    tableId: number;
+    changeChecked?: Function;
+    hasGroup?: boolean;
+    updateData?: Function;
+    showForm?: any;
+    showHistory?: Function;
+    delData?: Function;
+    getData?: Function;
+    flush?: Function;
+    extraMenu?: any;
+    noAdd?: boolean;
+    noEdit?: boolean;
+    noDel?: boolean;
+    overlayClassName?: string;
 }
 export interface CellState {
     prevProps: CellProps;
-    columns: [];
-    columnConfig: any;
-    rowData: [];
-    editValue: [];
-    originValue: [];
+    editValue: any[];
+    originValue: any[];
+    isEditVisible: boolean;
+    isMenuVisible: boolean;
 }
 export interface EditCellProps {
-    columns: [];
+    columns: any[];
     columnConfig: any;
-    rowData: [];
-    value: any;
+    rowData: any;
+    value: any[];
+    tableId: number;
+    cellData: any;
+    rowId: number;
+    component: any;
+    onChange: Function;
+    componentAttr?: any;
+    columnObj?: any;
+    record: any;
 }
 export interface EditCellState {
     prevProps: EditCellProps;

src/apollo-table/utils/formHelper.tsx

@@ -26,7 +26,9 @@ const getLocalData = ({ getLocalDataMethod }: any) => {
         } else {
             // console.log('没有找到获取本地数据的方法getLocalDataMethod');
         }
+        //@ts-ignore
     } else if (window.mtBridge) {
+        //@ts-ignore
         localData = window.mtBridge.data.localData || {};
     } else {
         // console.log('没有找到native交互桥mtBridge');

src/apollo-table/utils/storage.tsx

@@ -5,7 +5,7 @@ function checkCookieAuth() {
     return navigator.cookieEnabled;
 }
 
-const storage = {
+const storage:any = {
     getItem(key: string) {
         try {
             const value = localStorage.getItem(key);

src/test/index.tsx

 import React from 'react';
 import { render } from 'react-dom';
-import ApolloTable from '../src/apollo-table';
+import ApolloTable from '../apollo-table';
+import Data from './data';
 
-render(<ApolloTable>hh</ApolloTable>, document.getElementById('root'));
+const { cols, list } = Data;
+
+render(<ApolloTable columns={cols} dataSource={list} tableId={1} />, document.getElementById('root'));

tsconfig.json

 {
     "compilerOptions": {
-    /* Basic Options */
-    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-     "lib": [
-         "es2016",
-         "dom"
-     ],                             /* Specify library files to be included in the compilation. */
-//     "allowJs": true,                       /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-     "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-     "declaration": false,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-//     "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-     "outDir": "./dist",                        /* Redirect output structure to the directory. */
-//     "rootDir": "./test",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-     "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-     "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-     "typeRoots": [
-         "node_modules/@types"
-     ],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-     "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-     "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-     "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-    /* Advanced Options */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
-  }
+        "outDir": "./dist/",
+        "sourceMap": false,
+        "noImplicitAny": false,
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react",
+        "esModuleInterop": true
+    },
+    "include": ["./typings.d.ts"],
+    "files": [
+        "./src/test/index.tsx",
+        "./src/test/data.ts",
+        "./src/apollo-table/index.tsx",
+        "./src/apollo-table/component/index.tsx",
+        "./src/apollo-table/component/interface.tsx",
+        "./src/apollo-table/component/config.ts",
+        "./src/apollo-table/component/Table.tsx",
+        "./src/apollo-table/component/Column.tsx",
+        "./src/apollo-table/component/base/index.tsx",
+        "./src/apollo-table/component/base/config.tsx",
+    ]
 }

webpack.config.js

@@ -31,11 +31,11 @@ module.exports = {
     mode: 'development',
     entry: './src/test/index.tsx',
     output: {
-        filename: '[name].js',
-        path: path.join(__dirname, 'dist'),
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
     },
     resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.less'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
         alias: {
             '@': path.resolve(__dirname, 'src'),
         },
@@ -73,6 +73,16 @@ module.exports = {
                     'less-loader',
                 ],
             },
+            {
+                test: /\.css$/,
+                // include: [path.resolve(__dirname, 'src')],
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                    },
+                ],
+            },
             {
                 test: /\.(jpg|png|gif)$/,
                 use: {