antd table 从属关系_antd3.0 table新增的components属性如何使用
时间: 2023-10-20 13:05:19 浏览: 261
在antd Table中插入可编辑的单元格实例
`antd` 3.0 版本新增的 `components` 属性可以用来自定义表格的组件,其中包括 `header`、`body`、`footer` 等部分的组件。
例如,我们可以自定义表格的 `body` 部分的 `row` 组件,如下所示:
```jsx
import { Table } from 'antd';
const components = {
body: {
row: CustomRow,
},
};
function CustomRow(props) {
return (
<tr className="custom-row" onClick={() => console.log(props)}>
{props.children}
</tr>
);
}
function MyTable(props) {
return <Table {...props} components={components} />;
}
```
在上面的代码中,我们定义了一个 `CustomRow` 组件来自定义表格的 `body` 部分的 `row` 组件。然后,我们将这个组件作为 `components` 属性的 `body.row` 属性值传递给 `Table` 组件。
这样,在渲染表格时就会使用我们自定义的 `CustomRow` 组件来渲染表格的行。如果需要自定义其他部分的组件,也可以在 `components` 对象中添加相应的属性。
阅读全文