⌘ K
English

目录

代码演示
可编辑表格
可编辑表格
与 FormItem 配合
与 FormItem 配合
与编辑表格外的内容联动
与编辑表格外的内容联动
有子列的表格增加
有子列的表格增加
自定义可编辑表格
自定义可编辑表格
实时保存的编辑表格
实时保存的编辑表格
API
Editable 新建行
EditableFormInstance 表格列表单操作
editable 编辑行配置
recordCreatorProps 新建按钮配置
renderFormItem 自定义编辑组件
actionRender 自定义操作栏
Powered by
Dumi
Ant Design
kitchen

EditableProTable - 可编辑表格

可编辑表格 EditableProTable 与 ProTable 的功能基本相同,为了方便使用 EditableProTable 增加了一些预设,关掉了查询表单和操作栏,同时修改了 value 和 onChange 使其可以方便的继承到 antd 的 Form 中。

代码演示

可编辑表格

可编辑表格
活动名称
活动名称二
状态描述活动时间操作
 
 
 
 
 
 
表格数据
[]
可编辑表格

与 FormItem 配合

与 FormItem 配合

与编辑表格外的内容联动

总分:80
题数:40
关联题库题型题数计分方式分值操作
 
 
 
 
 
 
题库名称一lg...多选题10continuous20
移除编辑
题库名称二lg...单选题10continuous20
移除编辑
题库名称三lg...判断题10continuous20
移除编辑
题库名称四lg...填空题10continuous20
移除编辑
与编辑表格外的内容联动

有子列的表格增加

有子列的表格增加

自定义可编辑表格

可编辑表格
活动名称状态标签操作
 
 
 
 
表格数据
[]
自定义可编辑表格

实时保存的编辑表格

可编辑表格
活动名称状态描述操作
 
 
 
 
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
未解决
删除
表格数据
[
  {
    "id": "1675850162013",
    "title": "活动名称0",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162014",
    "title": "活动名称1",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162015",
    "title": "活动名称2",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162016",
    "title": "活动名称3",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162017",
    "title": "活动名称4",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162018",
    "title": "活动名称5",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162019",
    "title": "活动名称6",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162020",
    "title": "活动名称7",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162021",
    "title": "活动名称8",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162022",
    "title": "活动名称9",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162023",
    "title": "活动名称10",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162024",
    "title": "活动名称11",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162025",
    "title": "活动名称12",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162026",
    "title": "活动名称13",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162027",
    "title": "活动名称14",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162028",
    "title": "活动名称15",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162029",
    "title": "活动名称16",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162030",
    "title": "活动名称17",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162031",
    "title": "活动名称18",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  },
  {
    "id": "1675850162032",
    "title": "活动名称19",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000"
  }
]
实时保存的编辑表格

API

属性描述类型默认值
value同 dataSource,传入一个数组,是 table 渲染的元数据T[]undefined
onChangedataSource 修改时触发,删除和修改都会触发,如果设置了 value,Table 会成为一个受控组件。(value:T[])=>voidundefined
recordCreatorProps新建一行数据的相关配置RecordCreatorProps & ButtonProps-
maxLength最大的行数,到达最大行数新建按钮会自动消失number-
editable可编辑表格的相关配置TableRowEditable-
controlled是否受控, 如果受控每次编辑都会触发 onChange,并且会修改 dataSourcebooleanfalse
editableFormReftable 所有的 form,带了一些表格特有的操作React.Ref<EditableFormInstance<T>>undefined

别的 API 与 ProTable 相同。

Editable 新建行

新增一行的时候要保证 recordCreatorProps.record key 唯一,不然会导致编辑出错。

<EditableTable
  rowKey="id"
  recordCreatorProps={{
    position: position as 'top',
    // 每次新增的时候需要Key
    record: () => ({ id: getNewId() }),
  }}
/>

EditableFormInstance 表格列表单操作

相比于 ProForm 的表单,可编辑表格增加了以下的三个方法。

  /**
   * 获取一行数据的
   * @param rowIndex
   * @returns T | undefined
   *
   * @example getRowData(1)  可以传入第几行的数据
   * @example getRowData("id")  也可以传入 rowKey,根据你列的唯一key 来获得。
   */
  getRowData?: (rowIndex: string | number) => T | undefined;
  /**
   * 获取整个 table 的数据
   * @returns T[] | undefined
   */
  getRowsData?: () => T[] | undefined;
  /**
   * 设置一行的数据,会将数据进行简单的 merge
   *
   * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
   *
   * @description 只会做最第一层对象的 merge 哦。
   * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:"old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
   *
   * @param rowIndex
   * @param data
   * @returns void
   *
   * 根据行号设置
   * @example setRowData(1, { title:"new" })  可以传入修改第几行
   *
   * 根据行 id 设置
   * @example setRowData("id", { title:"new" })  也可以传入 rowKey,根据你列的唯一 key 来设置。
   *
   * 清空原有数据
   * @example setRowData(1, { title:undefined })
   *
   */
  setRowData?: (rowIndex: string | number, data: Partial<T>) => void;

editable 编辑行配置

属性描述类型默认值
type可编辑表格的类型,单行编辑或者多行编辑single | multiple-
form可编辑表格的 form 实例,使用 Form.useForm 生成后使用FormInstance-
formProps可以配置 form 的属性,但是不支持 onFinishFormProps-
editableKeys正在编辑的行,受控属性。 默认 key 会使用 rowKey 的配置,如果没有配置会使用 index,建议使用 rowKeyKey[]-
onChange行数据被修改的时候触发(editableKeys: Key[], editableRows: T[]) => void-
onSave保存一行的时候触发(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
saveText保存一行的文字React.ReactNode保存
onDelete删除一行的时候触发(key: Key, row: T) => Promise<any>-
deleteText删除一行的文字React.ReactNode删除
onCancel取消编辑一行时触发(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
cancelText取消编辑一行的文字React.ReactNode取消
actionRender自定义编辑模式的操作栏(row: T, config: ActionRenderConfig<T>) => ReactNode[]-
deletePopconfirmMessage删除时弹出的确认框提示消息ReactNode删除此行?
onlyOneLineEditorAlertMessage只能编辑一行的的提示ReactNode只能同时编辑一行
onlyAddOneLineAlertMessage只能同时新增一行的提示ReactNode只能新增一行

recordCreatorProps 新建按钮配置

为了使用,我们预设了一个新建的功能,大多数情况下已经可以满足大部分新建的需求,但是很多时候需求总是千奇百怪。我们也准备了 recordCreatorProps 来控制生成按钮。与 Pro 系列组件的 API 相同,recordCreatorProps={false}就可以关掉按钮,同时使用 actionRef.current?.addEditRecord(row)  来控制新建行。

recordCreatorProps 也支持自定义一些样式,position='top'|'bottom' 可以配置增加在表格头还是表格尾部。record 可以配置新增行的默认数据。以下是一个列举

recordCreatorProps = {
  // 要增加到哪个节点下,一般用于多重嵌套表格
  parentKey: React.key,
  // 顶部添加还是末尾添加
  position: 'bottom',
  // 新增一行的方式,默认是缓存,取消后就会消失
  // 如果设置为 dataSource 会触发 onchange,取消后也不会消失,只能删除
  newRecordType: 'dataSource',
  // 不写 key ,会使用 index 当行 id
  record: {},
  // 设置按钮文案
  creatorButtonText: '新增一行',
  // 按钮的样式设置,可以设置按钮是否显示
  // 这样可以做最大行限制和最小行限制之类的功能
  style: {
    display: 'none',
  },
  // https://ant.design/components/button-cn/#API
  ...antButtonProps,
};

renderFormItem 自定义编辑组件

虽然我们很希望默认的 valueType 可以满足所有的需求,但是现实往往不尽如人意。所以我们也提供了 renderFormItem 来自定义编辑输入组件。

renderFormItem 可以理解为在 Form.Item 下面加入一个元素, 伪代码实现是下面这样的:

const dom = renderFormItem();

<Form.Item>{dom}</Form.Item>;

所以与 Form.Item 相同,我们认为 renderFormItem 返回的组件都是拥有的 value 和 onChange 的,我们接下来将看到用 renderFormItem 将一个简单的 TagList 组件放入可编辑表格中。

没有 value 将会无法注入值,没有 onChange 会无法修改行数据

首先我们定义一个 TagList 组件。

const TagList: React.FC<{
  value?: {
    key: string;
    label: string;
  }[];
  onChange?: (
    value: {
      key: string;
      label: string;
    }[],
  ) => void;
}> = ({ value, onChange }) => {
  const ref = useRef<Input | null>(null);
  const [newTags, setNewTags] = useState<
    {
      key: string;
      label: string;
    }[]
  >([]);
  const [inputValue, setInputValue] = useState<string>('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let tempsTags = [...(value || [])];
    if (inputValue && tempsTags.filter((tag) => tag.label === inputValue).length === 0) {
      tempsTags = [...tempsTags, { key: `new-${tempsTags.length}`, label: inputValue }];
    }
    onChange?.(tempsTags);
    setNewTags([]);
    setInputValue('');
  };

  return (
    <Space>
      {(value || []).concat(newTags).map((item) => (
        <Tag key={item.key}>{item.label}</Tag>
      ))}
      <Input
        ref={ref}
        type="text"
        size="small"
        style={{ width: 78 }}
        value={inputValue}
        onChange={handleInputChange}
        onBlur={handleInputConfirm}
        onPressEnter={handleInputConfirm}
      />
    </Space>
  );
};

在列中我们可以这样配置它。

 {
    title: '标签',
    dataIndex: 'labels',
    width: '40%',
    renderFormItem: () => <TagList />,
    render: (_, row) => row?.labels?.map((item) => <Tag key={item.key}>{item.label}</Tag>),
  },

转化成的编辑表格效果如下 :

image.png

value 和 onChange 会自动注入,我们不需要显式的注入。数据绑定也是由编辑表格自己注入的,我们在 onSave 中可以拿到处理完成的数据。虽然我们可以行内的写很复杂的逻辑甚至网路请求,但是我们推荐使用拆分组件,这样不仅性能更好,逻辑也可以拆分的很简单。

renderFormItem 同时也用来生成查询表单,如果我们需要区分这两种情况,可以使用 renderFormItem: (_, { isEditable }) => (isEditable ? <TagList /> : <Input /> ) 这样的方式来进行分别渲染。

actionRender 自定义操作栏

可编辑表格默认提供了三大金刚, 保存,删除 和 取消,如果我们要实现复制一行,或者需求只需要的 保存和取消,不需要删除按钮就需要自定义了。可编辑表格提供了 API 来进行自定义,以下会直接展示代码:

复制一行到底部

render: (text, record, _, action) => [
  <a
    key="editable"
    onClick={() => {
      action?.startEditable?.(record.id);
    }}
  >
    编辑
  </a>,
  <EditableProTable.RecordCreator
    record={{
      ...record,
      id: (Math.random() * 1000000).toFixed(0),
    }}
  >
    <a>复制此行到末尾</a>
  </EditableProTable.RecordCreator>,
];

自定义操作栏

const editable = {
  // defaultDom = {save,cancel,delete} 可以酌情添加和使用
  actionRender: (row, config, defaultDom) => [defaultDom.save, defaultDom.cancel],
};
可编辑表格
活动名称状态描述活动时间操作
 
 
 
 
 
活动名称一未解决这个活动真好玩1594-02-02
编辑删除
活动名称二已解决这个活动真好玩1593-12-13
编辑删除
表格数据
[
  {
    "id": "624748504",
    "title": "活动名称一",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000",
    "update_at": "1590486176000"
  },
  {
    "id": "624691229",
    "title": "活动名称二",
    "decs": "这个活动真好玩",
    "state": "closed",
    "created_at": "1590481162000",
    "update_at": "1590481162000"
  }
]
可编辑表格
活动名称状态描述活动时间操作
 
 
 
 
 
活动名称一未解决这个活动真好玩1594-02-02
删除
活动名称二已解决这个活动真好玩1593-12-13
删除
活动名称二已解决这个活动真好玩1593-12-13
删除
表格数据
[
  {
    "id": 624748504,
    "title": "活动名称一",
    "decs": "这个活动真好玩",
    "state": "open",
    "created_at": "1590486176000",
    "update_at": "1590486176000",
    "children": [
      {
        "id": 6246912293,
        "title": "活动名称二",
        "decs": "这个活动真好玩",
        "state": "closed",
        "created_at": "1590481162000",
        "update_at": "1590481162000"
      }
    ]
  },
  {
    "id": 624691229,
    "title": "活动名称二",
    "decs": "这个活动真好玩",
    "state": "closed",
    "created_at": "1590481162000",
    "update_at": "1590481162000"
  }
]