首页 > 其他分享 >antd Pro组件ProFormList实现自定义action

antd Pro组件ProFormList实现自定义action

时间:2023-12-07 18:33:33浏览次数:38  
标签:count name 自定义 Pro move field action

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位于第一个时向上移动到最后一个,位于最后一个时向下移动到第一个,搞定

标签:count,name,自定义,Pro,move,field,action
From: https://www.cnblogs.com/zyj-Blogs/p/17882220.html

相关文章

  • C++(Protocol Buffers)
    ProtocolBuffers(简称Protobuf)是由Google开发的一种轻量级、高效、可扩展的数据序列化协议。它旨在成为一种语言无关、平台无关、可扩展、高效的数据交换格式。Protobuf通常用于在不同的系统或组件之间进行数据通信,如在分布式系统中,或者作为数据存储格式。以下是ProtocolBu......
  • vue3组件通信Props()
    vue3组件通信父传子defineProps()在使用 <scriptsetup> 的单文件组件中,props可以使用 defineProps() 宏来声明://父<HelloWorldmsg="Youdidit!"/><!--根据一个变量的值动态传入-->//<BlogPost:title="post.title"/>//子<scriptsetup>//写法1......
  • Modbus转Profinet网关连接EthernetIP协议的PLC和Modbus协议的仪表
    本案例是客户现场有多个气体探测仪,但是无法直接接入罗克韦尔系统中,因为气体探测仪是标准的ModbusRTU协议,需要配置的数据要通过Modbus转EtherNET/IP网关来实现和PLC的Ethernet网络进行通讯。使用设备为PLC、Modbus转EtherNET/IP网关、Modbus从站为气体探测仪。 项目中通讯配置方......
  • java 自定义查询StringBuffer Sql
    一、背景二、实现@AutowiredprivateEntityManagerentityManager;Queryquery=entityManager.createNativeQuery(sql);query.unwrap(SQLQuery.class).setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);List<Map<String,Object>>reportWaterTota=qu......
  • 在.net中通过自定义LoggerProvider将日志保存到数据库方法(以mysql为例)
     在.NET中,Microsoft.Extensions.Logging是一个灵活的日志库,它允许你将日志信息记录到各种不同的目标,包括数据库。在这个示例中,我将详细介绍如何使用Microsoft.Extensions.Logging将日志保存到MySQL数据库。我们将使用EntityFrameworkCore来与MySQL数据库进行交互。步骤一:创......
  • nginx中增加自定义的header,并且在nginx的日志中显示这个header的具体的值
    1、需求说明有的时候,为了进行某些特性的调试,需要增加自定义的header。 那么,要去测试这个header是否真的加成功了,后面某些的设置,需要使用这个值。 怎么办呢? 使用日志的方式,看nginx到底,有没有获得这个值。 2、配置过程 2.1谷歌浏览器使用插件,增加header 插件......
  • Spring的Bean工厂的后置处理器BeanFactoryPostProcessor执行流程
    BeanFactoryPostProcessor作用BeanFactoryPostProcessor是Spring框架中的一个重要接口,用于在BeanFactory加载Bean定义之后、实例化Bean之前对BeanFactory进行自定义修改和扩展。它允许开发人员在Spring容器加载配置文件并创建Bean实例之前对Bean定义进行操作,例如修改属性值、添加......
  • 【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法BeautifulPrompt
    近日,阿里云人工智能平台PAI与华南理工大学朱金辉教授团队合作在自然语言处理顶级会议EMNLP2023上发表了BeautifulPrompt的深度生成模型,可以从简单的图片描述中生成高质量的提示词,从而使文生图模型能够生成更美观的图像。BeautifulPrompt通过对低质量和高质量的提示进行微调,并进一步......
  • 【UVA 101】The Blocks Problem 题解(模拟+向量)
    计算机科学的许多领域使用简单、抽象的领域进行分析和实证研究。例如,早期的人工智能规划和机器人研究(STRIPS)使用了一个区块世界,其中机器人arm执行涉及块操作的任务。在这个问题中,您将在某些规则和约束下对一个简单的块世界进行建模。相当地与确定如何达到指定状态相比,您将“编程......
  • Jamf Pro 10.27: IT管理员的幸福指数的又一次提升
    1JamfPro10.27,旨在提升IT管理员的幸福指数。我们听取了您的反馈和要求,并很荣幸为您带来此最新版本。JamfPro10.27专注于改善管理员的日常操作,使Jamf易于使用且设备管理更简单。我们已听取了反馈,并相信10.27会体现出这些工作流程的改进请求。此外,此版本还包括了与JamfProtect的......