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

`antd 3.0`版本中，`Table`组件新增了`components`属性，用于自定义表格中的各种组件。其中，`components`属性的值是一个对象，包含了各种组件的自定义实现。这些组件包括：

- `header`：表格头部的组件。
- `body`：表格内容的组件。
- `footer`：表格底部的组件。
- `filterDropdown`：筛选菜单的组件。
- `filterIcon`：筛选菜单图标的组件。
- `filterDropdownVisible`：筛选菜单是否可见的组件。
- `expandIcon`：展开/收起图标的组件。

下面是一个简单的示例，展示如何使用`components`属性来自定义表格的筛选菜单：

import { Table } from 'antd';

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

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder="Search name"
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => confirm()}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => confirm()}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => inputRef.current.select(), 100);
      }
    },
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const components = {
  filterDropdown: ({ prefixCls, dropdownPrefixCls, column, ...restProps }) => (
    <th {...restProps} />
  ),
};

const Demo = () => (
  <Table
    columns={columns}
    dataSource={data}
    components={components}
  />
);

在上面的示例中，我们使用了`filterDropdown`、`filterIcon`、`onFilter`和`render`属性来实现表格的筛选功能，并使用了`components`属性来自定义筛选菜单的样式。具体来说，我们将`filterDropdown`属性的值设置为一个函数，该函数返回一个包含筛选菜单的`div`元素，其中包含一个`Input`组件、两个`Button`组件和一些样式。我们还将`filterIcon`属性的值设置为一个函数，该函数返回一个带有搜索图标的`SearchOutlined`组件。最后，我们还将`components`属性的值设置为一个对象，该对象只包含了`filterDropdown`属性，用于将筛选菜单的样式设置为空。