react-ant design table表格 多级可编辑表格

-------实现 多级表格 点击 操作 列 编辑 按钮 ，可 实现 这行 从不可编辑状态（类似div效果）变成 可编辑状态（类似input效果）

一、实现思路

1.基于官方文档的 内嵌多层表格 的columns 和数据字段（比如数据起的变量名是datalist） 定义好自己的 ‘columns’

2.给 操作栏 编辑按钮 绑定事件 传入参数 row, index

3.使 datalist中 第index项的 editChange（新加入属性） 属性变为 true

  const editBtn = (row, index) => {const newdatalist = JSON.parse(JSON.stringify(datalist));newdatalist[index].editChange = true;setdatalist(JSON.parse(JSON.stringify(newdatalist)));// 这里是为了 取消按钮setnewdataSource(newdatalist);setEditingKey(index);};
 

4.columns 中 rendren的 例子

render: (text, record, index) => {// 当前行的值，当前行数据，行索引return record.editChange ? () : (text);},
 

二、注意

1.不要忘记 编辑这一行的时候 禁用其他行