ant design Table可编辑的单元格改进版

最新推荐文章于 2025-06-23 17:58:24 发布

原创

最新推荐文章于 2025-06-23 17:58:24 发布 · 1.6w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#antd #可编辑表格

这篇博客介绍了如何简化Ant Design官方文档中复杂的可编辑表格实现方式，减少了代码量。通过修改`Table`组件的`columns`配置，特别是利用`render`方法将单元格转化为可编辑的`Input`组件，并结合`onChange`事件实现数据的实时更新。作者在`handleChange`函数中通过`state`来保存和更新表格数据，从而实现实时监听和数据同步。注意，选择合适的rowkey避免出现输入限制问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd官方也有给文档，但是超级麻烦，代码量还超级多，改编了一下
如图：

这里table的columns的写法，如下：

const columns2 = [
{
title: '尺寸名称',
dataIndex: 'name',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => <Input />,
},
{
title: '标准尺寸',
dataIndex: 'standard',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render:() => <Input />,
},
{
title: '上偏差',
dataIndex: 'upper_deviation',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render:() => <Input />,
},
{
title: '下偏差',
dataIndex: 'lower_deviation',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => <Input />,
},
{
title: '工序',
dataIndex: 'procedure',
filterDropdown: true,
filterIcon: <Icon type="edit"/>,
render: () => 
<Select>
    <Option value='1'>1</Option>