首页 前端知识 Ant Design Pro使用之--EditableProTable 可编辑表格

Ant Design Pro使用之--EditableProTable 可编辑表格

2024-02-11 10:02:22 前端知识 前端哥 914 15 我要收藏

前言--EditableProTable 与 ProTable的对比

首先:可编辑表格 EditableProTable 与 ProTable 的功能基本相同;

但是如果用ProTable的话,增和改一般是采用弹出浮层表单的方式,为了让结构看起来清晰,一般还会将这个弹出框抽成一个子组件。这无疑就多写了些步骤。当然,如果表格数据项很多,表单项种类多的话,我个人还是建议用ProTable+弹出浮层表单进行增改操作,这样更清晰明了,也是别人能一眼看清结构的操作,弹出层中ProForm对于各类表单项的支持度也比较好,用EditableProTable的话,有些特殊表单项的某些特定设置可能很难生效,而且如果表单项种类多的话,写在同一个组件中也显得代码杂乱;

所以对于一些稍微简单的表格,比如就只有5项内的数据,或者用到的表单项比较单一,比如只需要文本框和下拉选择框这种基本的表单项类型,且不需要查询表格的情况下(因为EditableProTable关掉了查询表单和操作栏),可以使用EditableProTable可编辑表格,增和改也可以很方便地在同一个组件设置完成。

基本使用

EditableProTable大部分的api都是和ProTable相同的,如果本身对于ProTable不是很熟悉,可以看我之前的关于ProTable的文章:《Ant Design Pro使用之--ProTable踩坑小计及样式调整碎碎念》,对于ProTable有基本的了解之后,看EditableProTable就会简单许多。

在这里只说几个EditableProTable特有的主要属性及相关用法吧:

比如下面是一个例子:

const actionRef = useRef<ActionType>();
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [form] = Form.useForm();

<EditableProTable
      columns={columns}
      actionRef={actionRef}
      options={false}
      request={getData}
      loading={false}
      rowKey="id"
      recordCreatorProps={{
        position: 'bottom',
        record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
        creatorButtonText: '新增企业地址',
      }}
      editable={{
        type: 'multiple',
        editableKeys,
        onlyAddOneLineAlertMessage: '请先保存地址后再新增',
        onSave: async (rowKey, data) => {
          save(data);
        },
        form,
        onCancel: () => {
          actionRef.current?.reload();
          return Promise.resolve();
        },
        onChange: setEditableRowKeys,
        actionRender: (_row, _config, dom) => [dom.save, dom.cancel],
      }}
    />

其中columns和request都是和ProTable相同的用法,便不再赘述,主要来说一下recordCreatorProps和editable两个属性:

1.recordCreatorProps:新建一行数据的相关配置。主要有以下小点:

  • record:由于每次新增时都需要唯一的key,所以新增一行的时要保证证 recordCreatorProps.record key 唯一,不然会导致编辑出错,所以我这里为了避免与后端返回的id相冲,就取了个很大的随机数;
  • position:通过配置  position="top"|"bottom" 可以配置增加按钮和增加的这一行是增加在表格头还是表格尾部;
  • 另外就是关于新建按钮的配置了,如果不想要这样的按钮,也可以通过recordCreatorProps={false}就可以关掉按钮,同时使用 actionRef.current?.addEditRecord(row)  来控制新建行。相关配置放在下面了,官网也有详细解释。
    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,
    };

2.editable:可编辑表格的相关配置,在官网写的已经超详细了,以下就是官网解释及我的理解:

属性描述类型默认值
type可编辑表格的类型,单行编辑或者多行编辑single | multiple-
form

可编辑表格的 form 实例,使用 Form.useForm 生成后使用,如果其他地方用不到form实例的话,也可以不用绑

FormInstance-
formProps可以配置 form 的属性,但是不支持 onFinishFormProps-
editableKeys

正在编辑的行,受控属性。 默认 key 会使用 rowKey 的配置,如果没有配置会使用 index,建议使用 rowKey。

可以与下面的onChange合并使用,在onChange的时候更改key即可

Key[]-
onChange

行数据被修改的时候触发。

可以与editableKeys合并使用,更改key

(editableKeys: Key[], editableRows: T[]) => void-
onSave

保存一行的时候触发。

这里可以拿到row数据,进行数据的提交等操作

(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
saveText保存一行的文字React.ReactNode保存
onDelete删除一行的时候触发(key: Key, row: T) => Promise<any>-
deleteText删除一行的文字React.ReactNode删除
onCancel

取消编辑一行时触发

最终需要返回一个promise

(key: Key, row: T,originRow:T,newLine?:newLineConfig) => Promise<any>-
cancelText取消编辑一行的文字React.ReactNode取消
actionRender

自定义编辑模式的操作栏。

第三个参数是默认按钮defaultDom,默认有保存(defaultDom.save),取消(defaultDom.cancel),删除(defaultDom.delete)按钮,可以自行配置

(row: T, config: ActionRenderConfig<T>) => ReactNode[]-
deletePopconfirmMessage删除时弹出的确认框提示消息ReactNode删除此行?

onlyOneLineEditor

AlertMessage

只能编辑一行的的提示ReactNode只能同时编辑一行

onlyAddOneLine

AlertMessage

只能同时新增一行的提示ReactNode只能新增一行

3.除了EditableProTable中的这些属性外,columns中有需要注意的就是:

  • valueType:通过设置valueType类型:valueType: 'select',或者valueType: 'date',等来设置表单项类型,这一点和ProTable是相通的;
  • formItemProps:通过formItemProps可以快速便捷地对于表单项进行配置,如添加校验,设置占位字符等。
    formItemProps: () => {
       return {
         rules: [{ required: true, message: '请输入地址名称' }],
       };
    },

小结

大概要注意的也就以上了吧,但还是建议在充分理解了ProTable之后,再使用EditableProTable会比较顺畅,不然会被很多东西卡住......如果对于本文或者相关用法还有什么疑问的话,也请让我知道吧,互相学习嘛~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1754.html
标签
react.js
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!