ProComponents EditableProTable使用

import { EditableProTable } from '@ant-design/pro-components';
 
const Demo = () => {
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '描述',
      dataIndex: 'description',
    },
  ];
 
  return (
    <EditableProTable
      size="small"
      rowKey="key"
      headerTitle="查看用户"
      maxLength={5}
      columns={columns}
      recordCreatorProps={
        {
          newRecordType: 'text',
          position: 'top',
        }
      }
    />
  );
};
 
export default Demo;

这个例子展示了如何使用EditableProTable组件来创建一个可编辑的表格，其中包含了必填的name字段和一个description字段。通过formItemProps属性，我们为name字段添加了必填的校验规则。其他属性如rowKey、headerTitle、maxLength和recordCreatorProps则用于配置表格的行标识、标题、最大行数和新记录的创建选项。