antd table 从属关系_antd3.0 table新增的components属性如何使用

antd 3.0 中的 `<Table>` 组件新增了 `components` 属性，用于自定义 table 的子组件。其中包括以下子组件：

- `header`：表头组件
- `body`：表格内容组件
- `footer`：表格底部组件

通过 `components` 属性可以分别对这些子组件进行自定义。例如，我们可以为表头组件添加一个自定义的过滤器组件：

import { Table, Input } from 'antd';

const { Search } = Input;

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

const SearchInput = ({ value, onChange }) => (
  <Search style={{ width: 200 }} value={value} onChange={e => onChange(e.target.value)} />
);

const components = {
  header: {
    filterRow: () => (
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th><SearchInput placeholder="Filter Name" onChange={value => console.log(value)} /></th>
        <th><SearchInput placeholder="Filter Age" onChange={value => console.log(value)} /></th>
        <th><SearchInput placeholder="Filter Address" onChange={value => console.log(value)} /></th>
      </tr>
    ),
  },
};

const App = () => (
  <Table
    dataSource={data}
    columns={[
      { title: 'Name', dataIndex: 'name' },
      { title: 'Age', dataIndex: 'age' },
      { title: 'Address', dataIndex: 'address' },
    ]}
    components={components}
  />
);

export default App;

在上面的例子中，我们为表头组件的 `filterRow` 方法自定义了一个搜索框组件 `SearchInput`，并将其添加到了表头的最后三列。这样，我们就可以在表头上方添加一个自定义的过滤器来对表格内容进行过滤。