dage-web-tools/packages/docs/docs/components/EditTable/custom-input-demo.tsx

import React, { FC, useState } from "react";
import { DageDefaultColumnTypes, DageEditable } from "@dage/pc-components";
import { Input, InputNumber } from "antd";

interface Item {
  key: string | number;
  name: string;
  age: number;
  address: string;
}

export const DageEditableDemo: FC = () => {
  const [dataSource, setDataSource] = useState<Item[]>([
    {
      key: "0",
      name: "Edward King 0",
      age: 32,
      address: "London, Park Lane no. 0",
    },
    {
      key: "1",
      name: "Edward King 1",
      age: 22,
      address: "London, Park Lane no. 1",
    },
  ]);

  const defaultColumns: DageDefaultColumnTypes<Item>[] = [
    {
      title: "name",
      dataIndex: "name",
      width: "30%",
      editable: true,
      Input: <Input placeholder="请输入内容，最多5字" maxLength={5} />,
    },
    {
      title: "age",
      dataIndex: "age",
      editable: true,
      Input: <InputNumber placeholder="请输入" />,
    },
    {
      title: "address",
      dataIndex: "address",
    },
  ];

  const handleSave = (row: Item) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    setDataSource(newData);
  };

  return (
    <DageEditable
      bordered
      dataSource={dataSource}
      defaultColumns={defaultColumns}
      handleSave={handleSave}
    />
  );
};