1

//表格单元格编辑
const EditableContext = React.createContext();
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};
const EditableCell = ({
  title,
  editable,
  validateType,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    if (!editing && record[dataIndex] === 0 && (validateType === 'Int' || validateType === 'Float')) {
      form.setFieldsValue({
        [dataIndex]: '',
      });
      return
    }
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const validateValue = (values) => {
    const originValue = record[dataIndex] + '';
    const nowValue = values[dataIndex] + '';
    let dotNum = 0;
    //根据数据类型返回对应数据
    switch (validateType) {
      case 'Int':
        if (isNumber(nowValue)) {
          values[dataIndex] = parseInt(nowValue);
        } else {
          values[dataIndex] = parseInt(originValue);
        }
        break;
      case 'Float':
        if (isFloat(nowValue)) {
          dotNum = originValue.split(".")[1] ? originValue.split(".")[1].length : 1;
          values[dataIndex] = parseFloat(parseFloat(nowValue).toFixed(dotNum));
        } else {
          values[dataIndex] = parseFloat(parseFloat(originValue));
        }
        break;
      default:
        break;
    }
    return values;
  }

  const save = async (e) => {
    try {
      const values = await form.validateFields();
      validateValue(values);
      toggleEdit();
      handleSave({ ...record, ...values }, dataIndex);
      
    } catch (errInfo) {
      console.log("Save failed:", errInfo);
    }
  };

  let childNode = children;
  
  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
          padding: 0,
        }}
        name={dataIndex}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 12,
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

2

//表格单元格编辑
  handleSave = (row, dataIndex) => {
    //row是更改后的最新行数据
    let newData = _.cloneDeep(this.state.dataSource);
    let index = newData.findIndex((item) => row.id === item.id);
    let item = newData[index];
    let judgeStr = row.judgeStr; 
    if (dataIndex === 'unitPrice') { //含税单价按需求得联动
      newData.forEach((item1) => {
        if (item1.judgeStr === judgeStr) {
          item1.unitPrice = row.unitPrice;
          item1.amount = accMul(item1.quantity, item1.unitPrice);
        }
      });
    } else {
      if (dataIndex === 'quantity') { //数量的改变将影响金额
        row.amount = accMul(row.quantity, row.unitPrice);
      }
      newData.splice(index, 1, { ...item, ...row });
    }

    this.getFilterData(newData);
    this.setState({
      dataSource: newData,
    });
  };

3

render() {

    ...

    //可编辑单元格配置
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };

    return (
      <React.Fragment>

        <TableWrap>
          <Table
            ...
            components={components}
            ...
          />
        </TableWrap>

      </React.Fragment>
    );
  }