antd Pro組件ProFormList自定義action二三事

来源:https://www.cnblogs.com/zyj-Blogs/archive/2023/12/07/17882220.html
-Advertisement-
Play Games

antd Pro組件ProFormList自定義action ProFormList是ant design pro的結構化數據組件,通常用來實現動態表單。 現在有個需求,除了組件自帶的刪除和複製,還需要增加兩個按鈕來實現每個item位置的上下移動,如圖所示: 查看官方文檔,組件有提供自定義actio ...


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位於第一個時向上移動到最後一個,位於最後一個時向下移動到第一個,搞定


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 當使用Autofac處理一個介面有多個實現的情況時,通常會使用鍵(key)進行區分或者通過IIndex索引註入,也可以通過IEnumerable集合獲取所有實例,以下是一個具體的例子,演示如何在Autofac中註冊多個實現,並通過構造函數註入獲取指定實現。 首先,確保你已經安裝了Autofac Nu ...
  • tmux教程 功能 分屏:可以在一個開發框里分屏 允許terminal在連接斷開之後可以繼續運行,讓進程不會因為斷開連接而中斷 結構 // 一個tmux可以包含多個session,一個session可以包含多個window,一個window可以包含多個pane。 tmux: session 0: w ...
  • 本文分享自華為雲社區《GaussDB資料庫SQL系列-層次遞歸查詢》,作者: Gauss松鼠會小助手2。 一、前言 層次遞歸查詢是一種常見的SQL查詢方式,特別是在一些層次化的數據存儲結構中經常用到。本文主要以GaussDB資料庫為實驗平臺,為大家講解其使用方法。 二、GuassDB資料庫層次遞歸查 ...
  • 在我們應用中的使用場景來看,簡單來說通常會看中了clickhouse在處理大批量數據的寫入和讀取分析方面的性能,MySQL會主要負責一些基於模型進行指標二次加工的高頻查詢及複雜join的查詢。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 大家好,今天聊一下在做uniapp多端適配項目,需要用到自定義導航時,如何解決狀態欄塌陷及導航欄安全區域多端適配問題,下文只針對H5、APP、微信小程式三端進行適配,通過封裝一個通用高階組件包裹自定義導航欄內容,主要是通過設置pad ...
  • 求上進的人,不要總想著靠誰,人都是自私的,自己才是最靠得住的人。 React 中生命周期劃時代幾個節點,React 16.2 之前處於老的生命周期,之後提出了新的生命周期。而函數式組件在 React 16.8 之前是沒有狀態和生命周期的,在 React 16.8 版本通過引入 Hooks 使得函數式 ...
  • HTML中的title標簽是非常重要的標簽之一,它用來描述網頁的標題。在搜索引擎優化中,title標簽是非常關鍵的,因為搜索引擎會將title標簽中的文字作為頁面的主要描述,並根據其相關性來判斷網頁內容的質量和權重。 ...
  • 小程式中最常見的功能就是底部導航欄了,今天就來看一下怎麼設置一個好看的導航欄~這裡我們使用的是支付寶官方小程式 IDE 做示範。 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...