Ant Design Pro使用之--EditableProTable 可编辑表格
前言--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();<EditableProTablecolumns={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 当行 idrecord: {},// 设置按钮文案creatorButtonText: '新增一行',// 按钮的样式设置,可以设置按钮是否显示// 这样可以做最大行限制和最小行限制之类的功能style: {display: 'none',},// https://ant.design/components/button-cn/#API...antButtonProps, };
2.editable:可编辑表格的相关配置,在官网写的已经超详细了,以下就是官网解释及我的理解:
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | 可编辑表格的类型,单行编辑或者多行编辑 |
single | multiple
|
- |
form |
可编辑表格的 form 实例,使用 |
FormInstance
|
- |
formProps | 可以配置 form 的属性,但是不支持 onFinish | FormProps | - |
editableKeys |
正在编辑的行,受控属性。 默认 可以与下面的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会比较顺畅,不然会被很多东西卡住......如果对于本文或者相关用法还有什么疑问的话,也请让我知道吧,互相学习嘛~
Ant Design Pro使用之--EditableProTable 可编辑表格相关推荐
- Ant Design Pro 企业级后台实战(73 个视频)
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...
- Ant Design Pro开发后台管理系统(新增页面)
通过实际demo演示一个管理后台的开发过程 知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表 其中 menuD ...
- 使用ant design Pro开发项目的小结
一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由 数据流管理)的组合 ...
- Ant Design Pro Vue使用心得
目录结构 ├── public │ └── logo.png # LOGO | └── index.html # Vue 入口模板 ├── src │ ├── api # Api ajax 等 │ ├ ...
- 前端初学者的Ant Design Pro V6总结(上)
前端初学者的Ant Design Pro V6总结(上) 一.UI组件开发流程 () => {} 通用(异步)函数 useEmotionCss 定义CSS useModel获取全局状态 useC ...
- Ant Design Pro 使用自定义iconfont图标,改变导航栏的图标
Ant Design Pro 使用iconfont上的图标有两种方法: 1.加载在线图标 创建一个项目(图标的前缀一定要设置为:icon-) 创建远程连接 复制代码,找到ant design pro项 ...
- ant design pro模板_Ant Design Pro 学习笔记
学习笔记 摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
- ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ...
- Ant Design Pro 网络请求流程
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ...
最新文章
- 飞天茅台超卖事故:Redis分布式锁请慎用!
- 区块链的价值在于建立信任,而ICO却在摧毁信任
- rabbitmq 启动报错 Failed to get nic info
- 5.16 12周第二课
- 快速统计hbase中某张表中数据条数
- Tech Websites
- OpenCV捕获正弦波模式
- bash的配置文件以及加载的顺序
- Nike Kyrie 1 Performance Review
- Spring Cloud简介–配置(第一部分)
- mysql定义条件和处理_mysql sql存储过程条件定义与处理
- springcloud(一):大话Spring Cloud
- 我被产品小姐姐的笔记本深深吸引了....
- StringJoiner 拯救那些性能低下的字符串拼装代码(转)
- php h5 调用摄像头_怎样使用H5调用摄像头
- windows bat脚本 理解 @echo off 和 echo off 的区别
- 昭通脱贫致富-农业大健康·林裕豪:从玉农业谋定“责任”
- 浏览器内核以及渲染过程
- 【opencv图像处理】--2. 颜色空间,绘制图形,绘制(中文)文本
- matlab dim是什么意思,哪位大神给我解释下这两句程序是什么意思