ant design Table可編輯的單元格改進版

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>    
    <Option value='2'>2</Option> 
</Select>
},
{
title: '操作',
dataIndex: 'operation',
render: (text, record) => (
this.state.size.length >= 1
? (
<Popconfirm title="確定刪除該信息?" onConfirm={() => this.handleDelete(record.key)}>
<a href="javascript:;">刪除</a>
</Popconfirm>
) : null
),
}
];

其中

 filterDropdown: true,

filterIcon: <Icon type="edit"/>,

這兩個是用於給表頭添加圖標，不需要可以不寫

實現可編輯表格最重要的是吧這個表格所有字段都變成可控字段，這樣就可以實現對錶格數據的提交的基本操作

就拿我這裏面的尺寸名稱來說，這個字段叫name ，這裏的render就要修改成render: (text, record) => <Input value={text} onChange={(e) => this.handleChange({name: e.target.value}, record)}/>,

這裏參數text可以理解爲  input的初始值，onChange事件是吧這個input變成可控的組件，handleChange這裏有兩個參數，這裏“”name: e.target.value“”必須要這麼傳，目的是把改組件的值跟name進行綁定。

 

handleChange 方法

handleChange = (value, record) => {
for (var i in value) {
record[i] = value[i];//這一句是必須的，不然狀態無法更改
this.setState({
size: this.state.size.map((item, key) => item.key == record.key ? {...item, [i]: value[i]} : item)
})
}
}

這裏我把這個可編輯表格的值存在state中的size中，通過key進行匹配（這裏key代表我這個表格的rowkey，也就是用來區分行數據的一個標識），然後修改指定行的指定數據，通過改變state中的size更新視圖，同時吧更改的數據替換掉原來的   這就實現了對錶格數據的實時監聽，同時表格的所有數據存在了state中的size中，想要獲取表格數據直接用this.state.size即可。（這裏需要注意的時，如果把表格中的某個字段，比如說name設置成表格的rowkey，就會發生name字段只能輸入單個字符就會失去焦點的情況）