最近接到一個(gè)小需求，將頁面上的原本僅展示信息的表格增加一個(gè)功能，即支持直接在頁面上進(jìn)行編輯捅暴。原表格也是借助 antd 生成的婉陷，在查閱了官方文檔后帚称，發(fā)現(xiàn)官網(wǎng)給出的示例里居然就有可編輯表格，真是太貼心了秽澳。
可編輯表格的代碼整體結(jié)構(gòu)如下闯睹，首先是創(chuàng)建可編輯單元格 EditableCell 子組件，然后是創(chuàng)建可編輯表格 EditableTable （其中使用了子組件 EditableCell ）担神，由于表格的原本功能僅僅是展示信息楼吃，并不包括接收用戶輸入（這是 Form 表單的職責(zé)），所以最后還需要用 Form.create() 封裝一下妄讯。
const EditableFormTable=Form.create()(EditableTable);
官網(wǎng)示例代碼就不貼了孩锡，見鏈接https://ant.design/components/table-cn/#components-table-demo-edit-cell。
項(xiàng)目中實(shí)際使用的可編輯表格在用戶編輯完成點(diǎn)保存按鈕后亥贸，先是通過 post 請求將新的數(shù)據(jù)保存到服務(wù)器（新的數(shù)據(jù)通過 post 請求的 body 傳輸）躬窜，然后再通過 get 請求去獲取新的數(shù)據(jù)，最后是更新 UI （這里看上去 get 請求更新數(shù)據(jù)顯得有點(diǎn)多余炕置，因?yàn)閿?shù)據(jù)是本地修改的荣挨，所以在本地展示其實(shí)不必再去請求服務(wù)器，不過如果別人也在他的本地修改了數(shù)據(jù)朴摊，那這個(gè)機(jī)制就有必要了默垄，便于數(shù)據(jù)同步）。相關(guān)代碼如下：
最后說下自己踩的一個(gè)關(guān)于 antd 的坑甚纲，就是如果不設(shè)置可編輯圖表的各列寬度厕倍，那么在點(diǎn)擊某行的“編輯”后，可能會造成所有行的高度都變大贩疙，這會導(dǎo)致用戶點(diǎn)擊某行的“編輯”后讹弯，由于前面各行高度也變大了况既，用戶目標(biāo)編輯的行會被擠到下面，影響體驗(yàn)组民，如圖所示
給各列設(shè)置寬度后（相對值或絕對值均可）棒仍，就不會出現(xiàn)以上問題。找了好久的原因臭胜。莫其。。
