antd Pro组件ProFormList实现自定义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位于第一个时向上移动到最后一个,位于最后一个时向下移动到第一个,搞定

相关推荐
阿࿆杰࿆2 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react
许泽宇的技术分享3 天前
ReAct Agent:让AI像人类一样思考与行动的革命性框架
人工智能·agent·react
青衫客365 天前
用 Python 实现一个“小型 ReAct 智能体”:思维链 + 工具调用 + 环境交互
python·大模型·llm·react
烂然星辰10 天前
Antd实现 JSON form + 动态表单 + 可编辑表格(JSON) + 全类型Tyescript提示
前端·ant design
柯北(jvxiao)12 天前
Vue vs React 多维度剖析: 哪一个更适合大型项目?
前端·vue·react
袋鼠云数栈前端12 天前
扣子 Coze 产品体验功能
大数据·ai·react
jason_yang17 天前
你也能成为ElementPlus,Ant-design开源贡献者
开源·element·ant design
想你依然心痛17 天前
React 表单处理:移动端输入场景下的卡顿问题与防抖优化方案
react
亦世凡华、22 天前
React--》实现 PDF 文件的预览操作
经验分享·pdf·react·pdf预览
技术路上的探险家23 天前
Web3:在 VSCode 中使用 Vue 前端与已部署的 Solidity 智能合约进行交互
vscode·web3·区块链·交互·react·solidity·ethers.js