diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 610f8de..8723384 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -7,18 +7,19 @@ import './DataTable.less' class DataTable extends React.Component { constructor (props) { super(props) - const { dataSource, pagination = false } = props + const { dataSource, pagination = { + showSizeChanger: true, + showQuickJumper: true, + showTotal: total => `共 ${total} 条`, + current: 1, + total: 100 }, + } = props this.state = { loading: false, dataSource, fetchData: {}, - pagination: pagination === true ? { - showSizeChanger: true, - showQuickJumper: true, - showTotal: total => `共 ${total} 条`, - current: 1, - total: 100, - } : pagination } + pagination, + } } componentDidMount () { @@ -28,10 +29,19 @@ class DataTable extends React.Component { } componentWillReceiveProps (nextProps) { - if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) { + const staticNextProps = lodash.cloneDeep(nextProps) + delete staticNextProps.columns + const { columns, ...otherProps } = this.props + + if (!lodash.isEqual(staticNextProps, otherProps)) { this.props = nextProps this.fetch() } + + // if (!lodash.isEqual(nextProps.fetch, this.props.fetch)) { + // this.props = nextProps + // this.fetch() + // } } handleTableChange = (pagination, filters, sorter) => { @@ -51,16 +61,16 @@ class DataTable extends React.Component { } fetch = () => { - const { fetch: { url, data, dataKey, ...otherFetch } } = this.props + const { fetch: { url, data, dataKey } } = this.props const { fetchData } = this.state this.setState({ loading: true }) + console.log(data) request(url, { result: 10, data: { ...data, ...fetchData, }, - ...otherFetch, }).then((result) => { const { pagination } = this.state pagination.total = result.total || pagination.total diff --git a/src/routes/ui/dataTable.js b/src/routes/ui/dataTable.js index 20bf4cc..226e619 100644 --- a/src/routes/ui/dataTable.js +++ b/src/routes/ui/dataTable.js @@ -22,6 +22,7 @@ class DataTablePage extends React.Component { const staticDataTableProps = { dataSource: [{ key: '1', name: 'John Brown', age: 24, address: 'New York' }, { key: '2', name: 'Jim Green', age: 23, address: 'London' }], columns: [{ title: 'name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' }], + pagination: false, } const fetchDataTableProps = { @@ -39,7 +40,6 @@ class DataTablePage extends React.Component { { title: 'Gender', dataIndex: 'gender' }, ], rowKey: 'registered', - pagination: true, } const caseChangeDataTableProps = { @@ -58,7 +58,6 @@ class DataTablePage extends React.Component { { title: 'Gender', dataIndex: 'gender' }, ], rowKey: 'registered', - pagination: true, } return (