Table筛选结果追加自定义数据表格不显示 antd

http404
  • 259

筛选结果后添加自定义的数据发现表格不显示,请问还有其他方法吗?其它自定义筛选api我试了好像也不行

onChange = (pagination, filters, sorter, extra) => {//筛选
    let addData = {
      key: '10',
      name: 'test',
      age: 32,
      address: 'test11',
    },
     this.setState({dataSource:[...extra.currentDataSource,addData]})
 }

下面是官方的demo

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'Category 1',
        value: 'Category 1',
      },
      {
        text: 'Category 2',
        value: 'Category 2',
      },
    ],
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.address.startsWith(value),
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: <span>London</span>,
        value: 'London',
      },
      {
        text: <span>New York</span>,
        value: 'New York',
      },
    ],
    onFilter: (value, record) => record.address.startsWith(value),
    filterSearch:(input, record) => record.value.indexOf(input) > -1,
    width: '40%',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
];

class App extends React.Component {
  state = {
    dataSource: data,
  };

  onChange = (pagination, filters, sorter, extra) => {
    let addData = {
      key: '10',
      name: 'test',
      age: 32,
      address: 'test11',
    },
     this.setState({dataSource:[...extra.currentDataSource,...addData]})
  }

  render() {
    const { dataSource } = this.state;
    return <Table columns={columns} dataSource={dataSource} onChange={onChange} />;
  }
}

ReactDOM.render(<App />, mountNode);
回复
阅读 191
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏