2.通过onHeaderRow方法来获取标题行并设置其可编辑。
const components = {
header: {
row: EditableFormRow,
cell: EditableCell,
},
};
class EditableTable extends React.Component {
state = {
dataSource: [...],
count: 2,
};
...
// 获取可编辑标题行的方法
getHeaderRowProps = (record, index) => {
const { components } = this.props;
return {
onDoubleClick: () => {
// 关闭其他正在编辑的行
components.header.row.instances.forEach((ele) => {
if (ele && ele.state.editing) ele.setState({ editing: false });
});
// 开始编辑
const instance = components.header.row.instances[index];
if (instance) instance.setState({ editing: true });
},
};
};
render() {
const { dataSource } = this.state;
const { components } = this.props;
const columns = this.columns.map((col) => {
// 可编辑的标题行
if (!col.editable) {
return {
...col,
onHeaderCell: (column) => ({
// 将可编辑单元格的props传入
components: components.header,
column,
onDoubleClick: this.getHeaderRowProps,
}),
};
}
return col;
});
return (
);
}
}
export default EditableTable;
const EditableFormRow = ({ form, index, ...restProps }) => (
);
export default EditableFormRow;
其中,FormComponent