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

Antd 3.0 中新增的 `components` 属性可以用来自定义表格的各种组件，包括表头、表格行、表格列等。具体使用方法如下：

首先需要导入需要自定义的组件，例如：

import { Table } from 'antd';
import CustomHeader from './CustomHeader';
import CustomRow from './CustomRow';
import CustomCell from './CustomCell';

然后将这些自定义组件通过 `components` 属性传递给 `Table` 组件：

<Table
  dataSource={dataSource}
  columns={columns}
  components={{
    header: {
      cell: CustomHeader,
    },
    body: {
      row: CustomRow,
      cell: CustomCell,
    },
  }}
/>

在上述代码中，我们将 `CustomHeader` 组件作为表头组件，将 `CustomRow` 组件作为表格行组件，将 `CustomCell` 组件作为表格列组件。这样，当渲染表格时，Antd 就会使用我们自定义的组件来替换默认的组件。

在自定义组件中，可以通过 `props` 获取表格的数据和其他属性，并根据需要进行自定义渲染。例如，我们可以在 `CustomHeader` 组件中自定义表头的样式和内容：

const CustomHeader = (props) => {
  return (
    <thead className="custom-header">
      <tr>
        {props.columns.map((column) => {
          return (
            <th key={column.key} className="custom-header-cell">
              {column.title}
            </th>
          );
        })}
      </tr>
    </thead>
  );
};

在上述代码中，我们使用了 `props.columns` 获取表格的列定义，然后根据列定义渲染表头单元格。其他自定义组件的实现方式类似。