react antd 实现可编辑表格EditableProTable可编辑表格，显示不了输入框可编辑表格

 // 设置列数据
  const columns=[
    {
      title: '规格1',
      dataIndex: 'pric',
      
      editable: false,
      key:'index',
    },
    {
      title: '规格2',
      dataIndex: 'pric',
      key:'index',
     
      editable: false,
      // render:(_,record)=>{
      //   return (<Input defaultValue={record.pric}/>)
      // }
    },
    {
      title: '图片',
      dataIndex: 'img',
     
      editable: false,
    },
    {
      title: '售价',
      dataIndex: 'pric',
     
      editable: true,
    },
    {
      title: '原价',
      dataIndex: 'pric_to',
      
      editable: true,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      
      editable: true,
    },
    {
      title: '库存15',
      dataIndex: 'index',
      
      editable: true,
    },
  ]
 //旧数据
  const [data, setdata] = useState(dataSource);
  //是否编辑
  const [isEdit, setisEdit] = useState(true);
  //新数据
  const [temData, settemData] = useImmer(dataSource)
  const mergedColumns: any = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record, rowIndex) => ({
        record,
        rowIndex,
        dataIndex: col.dataIndex,
        title: col.title,
        isEdit: isEdit,
        data: temData,
        handChange

      }),
    };
  });
  修改数据
 const handChange =(value, rowIndex, dataIndex)=>{
    console.log(value, rowIndex, dataIndex,"ahha哈哈")
    console.log(temData[rowIndex][dataIndex],"哈哈哈-----")
    // temData[rowIndex][dataIndex]=value
    settemData((def)=>{
      def[rowIndex][dataIndex]=value
    })
  }
const EditableCell = ({
    dataIndex,
    rowIndex,
    title,
    record,
    index,
    children,
    isEdit,
    data,
    handChange,
    ...restProps
  }) => {
   
    return (
      
      <td {...restProps}>
        {
          isEdit ? (
            // 这里可以自定义需要的类型进行处理
            <Input defaultValue={data[rowIndex][dataIndex]} onChange={(e) => handChange(e.target.value, rowIndex, dataIndex)} />
          ) : (
            children
          )
        }
      </td>
    );
  };
<Table dataSource={dataSource}  columns={mergedColumns}
                   components={{ body: { cell: EditableCell } }}
                  >
 </Table>

使用插件@ant-design/pro-components

import { message, Modal, RadioChangeEvent, Image, InputNumber } from "antd";
import { useEffect, useState } from "react";
import { upOrder } from "@/api/order";
import { useImmer } from "use-immer";
import { EditableProTable } from "@ant-design/pro-components";
import { storeData } from "@/store";
 // 获取随机字符串
 function generateRandomString(length: number) {
    const characters =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let result = "";
    const charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * charactersLength);
      result += characters[randomIndex];
    }
    return result;
  }
interface Iprops{
  data:{
    [key:string]:any
  },
  open:boolean,
  onOk:()=>void,
  onCancelClose:(statue:number|string)=>void
}
const ReceivingOrders=(props:Iprops)=>{
  const [messageApi, contextHolder] = message.useMessage();
   const configSever = storeData.getState().getDataConfig.staticUrl;
  const [loading,setLoading]=useImmer(false)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const {  onCancelClose,data } = props;
    const[statue,setStatue]=useImmer(2)
    const [dataSource,setDataSource]=useImmer([])
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  // 表头
  const columns:any = [
    {
        title: '产品图',
        dataIndex: 'showImage',
        key: 'showImage',
        editable: false,
        render: (text:string) => {
            
            return <Image width={80} height={80} src={configSever + text}></Image>
        },
      },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',  editable: false,
  },
  {
    title: '规格值',
   dataIndex: 'unit',
   key: 'unit',  editable: false,
  },
  {
    title: '数量',
   dataIndex: 'unit',
   key: 'unit',  editable: false,
  },
  {
    title: '小计',
   dataIndex: 'totalPrice',
   key: 'totalPrice',
   editable: false,
  },
  {
    title: '实际金额',
   dataIndex: 'realTotalPrice',
   key: 'realTotalPrice',
   editable: true,
   renderFormItem:({ index }: any) => <InputNumber min={0.01} step={0.01} // 设置步长为 0.01，支持两位小数
  precision={2} value={index} onChange={(e)=>{
    
    if(!e){
      messageApi.open({
        type: 'error',
        content: '小计只能是数字',
      });
    }
  }}></InputNumber>
  
  },
  {
    title: '备注说明',
   dataIndex: 'describe',
   key: 'describe',
   requried: true,
   editable: true,
  }
]
const [columns1,setColumns1]=useImmer([])
  useEffect(()=>{
   if(props.open){
    console.log(props,"哈哈哈--")
    setIsModalOpen(props.open)
    if(data.orderProducts.length>0){
        const newData = data.orderProducts.map((item: any) => ({
            ...item,
            idrend: generateRandomString(18),
            realTotalPrice: item.totalPrice,
            describe: ""
          }));
          setDataSource(newData);
          setEditableRowKeys(newData.map((item: any) => item.idrend));
          setIsModalOpen(true);
    }
    // setDataSource(data.orderProducts)
   }
   setColumns1(columns)
  },[props.open])
   
  
    const okClick = () => {
      setLoading(true)
      upOrder({
        orderId:String(""),
        status:String(statue)
      }).then(res=>{
        setLoading(false)
        messageApi.open({
          type: 'success',
          content: '操作成功',
        });
        onCancelClose(statue);
        console.log(res)
      }).catch(()=>{
        setLoading(false)
        messageApi.open({
          type: 'error',
          content: '操作失败',
        });
      })
      
      // setIsModalOpen(false);
    };
  
    const onChange1 = ({ target: { value } }: RadioChangeEvent) => {
     
     setStatue(value)
    };
    

    return(
        <div>
          {contextHolder}
            {/* onCancel={handleCancel} */}
            <Modal title="配货信息确认" onCancel={()=>{
              onCancelClose(0)
              setStatue(1)
              
            }} width="1000px" open={isModalOpen} onOk={()=>{
              okClick()
            }} >
              <EditableProTable
                                headerTitle=""
                                rowKey="idrend"
                                recordCreatorProps={false}
                                scroll={{
                                  x: 920,
                                }}
                                value={dataSource}
                                onChange={() => {
                                  
                                }}
                                columns={columns1}
                                editable={{
                                  type: "multiple",
                                  editableKeys,
                                  actionRender: (row, config, defaultDoms) => {
                                   console.log(config,row)
                                    return [defaultDoms.delete];
                                  },
                                  onValuesChange: (record, recordList) => {
                                  console.log(record)
                                    setDataSource(() => {
                                      return recordList;
                                    });
                                  },
                                  onChange: setEditableRowKeys,
                                }}
                              ></EditableProTable>
                
            </Modal>
        </div>
    )
}
export default ReceivingOrders;

坑点1 显示不出来可编辑表格

我这里是吧可编辑表格放到子组件中的，这个rowkeys只能也是放到useEffect,每次都是新的key就实现了可编辑表格了
官网 https://procomponents.ant.design/components/editable-table#editableforminstance-%E8%A1%A8%E6%A0%BC%E5%88%97%E8%A1%A8%E5%8D%95%E6%93%8D%E4%BD%9C