antd Pro组件ProFormList实现自定义action

ProFormList是ant design pro的结构化数据组件,通常用来实现动态表单。

现在有个需求,除了组件自带的删除和复制,还需要增加两个按钮来实现每个item位置的上下移动,如图所示:

查看官方文档,组件有提供自定义action的API--actionRender,介绍如下

/**
* @name 自定义操作按钮
*
* @example 删除按钮
* actionRender:(field,action)=><a onClick={()=>action.remove(field.name)}>删除</a>
* @example 最多只能新增三行
* actionRender:(f,action,_,count)=><a onClick={()=>
* count>2?alert("最多三行!"):action.add({id:"xx"})}>删除
* </a>
*/
actionRender?: (
field: FormListFieldData,
/**
* 操作能力
* @example action.add(data) 新增一行
* @example action.remove(index) 删除一行
* @example action.move(formIndex,targetIndex) 移动一行
*/
action: FormListOperation,
/**
* 默认的操作dom
* [复制,删除]
*/
defaultActionDom: ReactNode[],
/**
* 当前共有几个列表项
*/
count: number,
) => ReactNode[];

API提供的参数--action提供了移动位置的方法action.move(formIndex,targetIndex),只需要传入当前位置索引和目标位置索引即可。

那现在的问题就是如何知道当前操作的item索引位置呢,官方文档写的不是很详细。研究了一会,奥秘竟在field参数中!

打印一下三个item的field

{
"name": 0,
"key": 0,
"isListField": true,
"fieldKey": 0,
"uuid": "fbf3b67a-345b-4645-ad0e-5bef325a8c39"
}
{
"name": 1,
"key": 1,
"isListField": true,
"fieldKey": 1,
"uuid": "2f8a7f5a-34f2-456e-8816-6ab0b6e72332"
}
{
"name": 2,
"key": 2,
"isListField": true,
"fieldKey": 2,
"uuid": "926653b6-df29-447a-bd40-a16a178e251a"
}

尝试执行move(0,1)后,再次打印对比uuid发现,name的值正是list索引,且随数组动态变化的,那就好办了,你早说嘛真是的。

于是答案呼之欲出:

 actionRender={(field, action, defaultActionDom, count) => {
return [
...defaultActionDom,
<ArrowUpOutlined
key="up_arrow"
style={{ marginLeft: '5px' }}
onClick={() => {
if (field.name === 0) {
//位于第一个,移动到最后一个
action.move(field.name, count - 1);
} else {
action.move(field.name, field.name - 1);
}
}}
/>,
<ArrowDownOutlined
key="down_arrow"
style={{ marginLeft: '5px' }}
onClick={() => {
if (field.name === count - 1) {
//位于最后一个,移动到第一个
action.move(field.name, 0);
} else {
action.move(field.name, field.name + 1);
}
}}
/>,
];
}}

defaultActionDom直接挪过来,增加判断:当item位于第一个时向上移动到最后一个,位于最后一个时向下移动到第一个,搞定

antd Pro组件ProFormList实现自定义action的更多相关文章

  1. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  2. 强大的table组件-antd pro table

    概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...

  3. 自定义Antd Pro 默认元素

    概要 通用元素 修改的方式 主页面 标签上的图标 logo 和 系统名称 footer 的配置 loading 页面 最终效果 概要 使用 Antd Pro 来开发前端项目时, 生成的项目模板中, 一 ...

  4. antd pro table中的文件上传

    概述 示例代码 列表页面 form 页面 model.js service.js 总结 概述 项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro t ...

  5. 6. 使用antd pro构建web页面

    前言 在开始之前,希望我们已经掌握了一部分react的知识,由于没有太多经验,其实我也是属于摸索阶段.这里假定我们已经了解了react,redux和dva/umi相关的知识.并有做过相关练习. 如果还 ...

  6. 学习 Antd Pro 前后端分离

    1.前言 最近学习reactjs ,前些年用RN开发过移动端,入门还算轻松.现在打算使用 Antd Pro 实现前后端分离.要使用Antd Pro这个脚手架,必须熟悉 umi.dva.redux-sa ...

  7. element-ui上传组件,通过自定义请求上传文件

    记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方. <el-upload ref="uploadMutiple" :auto-upload=&quo ...

  8. antd EditableProTable 组件的简单用法

    首先,antd EditableProTable 组件是在 table组件的基础上又封装了一层,可以实现行更新,删除,增加.只需动动手指,简单配置一下即可. 先下载 EditableProTable ...

  9. Wix打包系列(三)自定义Action(Custom Action)

    原文:Wix打包系列(三)自定义Action(Custom Action) 3.1 关于Action 我们已经知道如何生成具有标准安装界面的安装程序了,Windows Installer按照我们的界面 ...

  10. struts 中自定义action访问方法

    struts中action类继承了ActionSupport  默认实现了execute()方法 struts.xml配置文件中 然后可以配置如下映射: <package name =" ...

随机推荐

  1. 7.1 C++ STL 非变易查找算法

    C++ STL 中的非变易算法(Non-modifying Algorithms)是指那些不会修改容器内容的算法,是C++提供的一组模板函数,该系列函数不会修改原序列中的数据,而是对数据进行处理.查找 ...

  2. WPF MVVM之点滴分享

    (第五点:绑定源有修改) 我并不打算长篇累牍的介绍什么是MVVM.我尽量简洁的介绍,并把自己的经验分享给大家. 一.关于MVVM M:Model,数据模型(后台存储数据的类) V:View,视图(大部 ...

  3. JNI动态注册以及JNI签名

    一.动态注册和静态注册 注册native方法有两种方式,动态注册和静态注册.静态注册是在编译时进行注册,而且在java中声明的native方法和c/c++中的本地方法的对应关系是恒定的:比如说在com ...

  4. MySQL 分表查询

    分表是一种数据库分割技术,用于将大表拆分成多个小表,以提高数据库的性能和可管理性.在MySQL中,可以使用多种方法进行分表,例如基于范围.哈希或列表等.下面将详细介绍MySQL如何分表以及分表后如何进 ...

  5. java线程的interrup、tUninterruptibles.sleepUninterruptibly和sleep、wait

    参考: (1)https://blog.csdn.net/qq_36031640/article/details/116696685 (2)https://blog.csdn.net/liuxiao7 ...

  6. dedebiz发布文章自动提交到百度搜索的方法

    修改程序文件 依次打开/admin/article_add.php和article_edit.php 找到ClearMyAddon($id, $title); 在其上面加入 //自动提交到百度 els ...

  7. Solution -「ARC 123F」Insert Addition

    大约是翻译了一下官方题解? @Description@ 对于一个整数序列 \(P=(P_{1},\dots,P_{m})\),定义 \(f(P)\) 为一个序列 \(Q\) 满足: \(Q_{i}=P ...

  8. WebKit Inside: CSS 样式表解码字符集

    CSS 样式表引入有3种方式: 外部样式表.内部样式表.行内样式,不同的引入方式,解码样式表的字符集原理不一样. 外部样式表 外部样式表由 link 标签引入,当 WebKit 解析到 link 标签 ...

  9. GO语言基础之基本运算符

    GO语言基础之基本运算符 目录 GO语言基础之基本运算符 一.运算符 内置运算符: 二.算术运算符 三.关系运算符 四.逻辑运算符 五.位运算符 六.赋值运算符 一.运算符 作用:运算符用于在程序运行 ...

  10. 使用CEF(六)— 解读CEF的cmake工程配置

    距离笔者的<使用CEF>系列的第一篇文章居然已经过去两年了,在这么长一段时间里,笔者也写了很多其它的文章,再回看<使用CEF(一)- 起步>编写的内容,文笔稚嫩,内容单薄是显而 ...