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
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...