index.js

import React  from 'react'
import {
  Table, Input, Button, Popconfirm, Form,
} from 'antd';
import ReactDOM from 'react-dom'
import styles from './table.css';
const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

export default class EditableTable extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      dataSource: [{
        key: '0',
        0: '险种',
        1: '保额',
        2: '保费',
        3:'缴费期限'
      }
      ],
      columns : [{
        title: '险种',
        dataIndex: '0',
        width: '25%',
        editable: true,
      }, {
        title: '保额',
        dataIndex: '1',
      }, {
        title: '保费',
        dataIndex: '2',
      }, {
        title: '期间',
        dataIndex: '3',
      }],
      count: 2,
    };
  }
  componentWillReceiveProps(nextProps){
    this.setState({
      dataSource:nextProps.listTable,
      columns:nextProps.listTitle,
    })
  }
  componentDidMount(){
    this.setState({
      dataSource:this.props.listTable,
      columns:this.props.listTitle,
    })
  }
  render() {
    const { dataSource } = this.state;
    const { scroll } = this.props;
    const columns = this.state.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
      };
    });
    return (
      <div>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          scroll={scroll}
        />
      </div>
    );
  }
}