本文介绍Ant Design 3.0版本中Table组件新增的`components`属性，该属性允许用户覆盖默认的table元素以实现更精细的定制。通过示例代码展示如何自定义`HeaderWrapper`、`HeaderRow`、`HeaderCell`、`BodyWrapper`、`BodyRow`和`BodyCell`等组件，以实现从属关系的自定义布局和样式。然而，示例代码并未完全生效，可能需要进一步调试和优化。
antd3.0 table新增了components属性，用于覆盖默认table元素，官方更新日志上只提供了简答的配置，没有详细的元素使用方式，自己写了个如下，单没有起作用
import React from 'react';
import { Table } from 'antd';
export class TestTable extends React.Component {
constructor() {
super();
this.state = {
components: {
table: MyTable,
header: {
wrapper: HeaderWrapper,
row: HeaderRow,
cell: HeaderCell,
},
body: {
wrapper: BodyWrapper,
row: BodyRow,
cell: BodyCell,
},
},
dataSource:[{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号'
}],
columns: [{
title: '姓名',
dataIndex: 'name',
key: 'name',
}, {
title: '年龄',
dataIndex: 'age',
key: 'age',
}, {
title: '住址',
dataIndex: 'address',
key: 'address',
}]
}
}
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const { components, columns, dataSource } = this.state;
return (
);
}
}
const MyTable = () =>
const HeaderWrapper = () =>
const HeaderRow = () =>
const HeaderCell = () =>
const BodyWrapper = () =>
const BodyRow = () =>
const BodyCell = () =>
2161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
