子表單

1. 什么是子表單

一種高級的容器組件，可以在其內(nèi)部添加文本、數(shù)值、日期等組件，比如在商品錄入時，需要添加多條商品信息等場景可使用。

2. 適用場景

子表單多用于錄入數(shù)據(jù)的時候，比如出庫單、入庫單、銷售單，其中的商品明細(xì)就可以用子表單記錄，可以根據(jù)實際需要錄入的數(shù)據(jù)新增條數(shù)。

3. 基礎(chǔ)功能

3.1 排列方式

設(shè)置子表單的排列方式，默認(rèn)以表格方式展示。

3.1.1 表格方式

表格

展示效果：

注：主題、顯示表頭，僅支持在 PC 端排列方式為表格方式時才展示

3.1.2 平鋪方式

平鋪

效果如圖：

3.2 設(shè)置新增按鈕名稱

新增數(shù)據(jù)的按鈕名稱默認(rèn)為新增一項，可以自定義名稱，效果如圖：

設(shè)置新增按鈕名稱

3.3 設(shè)置刪除按鈕名稱

設(shè)置刪除按鈕名稱

3.4 允許新增最大條數(shù)

可以自定義新增的數(shù)據(jù)條數(shù)，但體驗版宜搭的上限目前是 50 條

注：所有宜搭付費版的應(yīng)用（標(biāo)準(zhǔn)版、尊享版、釘釘專業(yè)版等），以前是200條，目前上限均提升至500條

子表單最大條數(shù)

3.5 子表列寬

支持自定義，再長內(nèi)容也不怕顯示不全

自定義子表單列寬

3.6 支持子表信息一鍵批量導(dǎo)入，告別一行行的手動輸入

路徑：訪問表單即可看見在子表單下會有個批量導(dǎo)入的按鈕，點擊批量導(dǎo)入即可。（如表單開啟了公開訪問（免登），則表單內(nèi)的子表單不支持批量導(dǎo)入操作）

子表單的批量導(dǎo)入模板字段順序與表單設(shè)計字段順序一致

訪問頁面

• 子表數(shù)據(jù)高效錄入：支持 Excel 批量導(dǎo)入數(shù)據(jù)

• 子表單錄入數(shù)據(jù)，新增子表單的「批量導(dǎo)入」入口批量導(dǎo)入每次支持50條

批量導(dǎo)入頁面

導(dǎo)入成功之后，如圖：

3.7 支持子表信息一鍵快速導(dǎo)出，輕量數(shù)據(jù)獨立獲取

• 子表數(shù)據(jù)快速導(dǎo)出：

• 表單詳情頁的子表單內(nèi)容，支持子表信息快速導(dǎo)出 Excel

批量導(dǎo)出

批量導(dǎo)出中

批量導(dǎo)出成功

3.8 支持主表+子表單內(nèi)容 Excel 一并導(dǎo)出

• 支持主表單數(shù)據(jù) + 子表單數(shù)據(jù)的一并導(dǎo)出

• 導(dǎo)出新能力：

• 子表信息導(dǎo)出，智能合并單元格子表信息導(dǎo)出本地 Excel 后，經(jīng)過數(shù)據(jù)內(nèi)容編輯，子表內(nèi)容支持重新導(dǎo)回到宜搭表單數(shù)據(jù)中

• 子表 + 基礎(chǔ)組件目前支持導(dǎo)出后重新導(dǎo)入

表單頁面

數(shù)據(jù)詳情頁面

Excel 表格頁面

4. 高級功能

4.1 操作列

4.1.1 新建操作列

新建操作列之后，可以點擊編輯去操作綁定動作

操作列

效果如圖：

4.1.2 回調(diào)函數(shù)

參考 動作設(shè)置

操作--項目-0

回調(diào)函數(shù)

JS 面板

4.1.3 定制渲染

支持 jsx

定制渲染-綁定動作

效果如圖：

5. 常見問題

5.1 如何批量刪除子表單內(nèi)的數(shù)據(jù) ？

您好，需要配置一個刪除動作，如下圖所示：

注：這樣操作默認(rèn)是全刪除，勾選批量刪除目前還不支持

5.2 如何獲取子表內(nèi)指定的控件值 ？

獲取子表單內(nèi)的數(shù)據(jù)用于表單校驗或作為數(shù)據(jù)源調(diào)用的入?yún)⒌葓鼍?/p>

參考代碼：

const subFormInst = this.$('子表單唯一標(biāo)識');
// 先獲取 行 標(biāo)識
const items = subFormInst.getItems(); //  ["tfitem_1", "tfitem_2"]
items.forEach(item => {
  const fieldInst = subFormInst.getComponent(item, '子表單內(nèi)部控件的唯一標(biāo)識');
  console.log(fieldInst.getValue());
});

5.3 子表關(guān)聯(lián)子表 & 子表單賦值 ？

常用于跨應(yīng)用關(guān)聯(lián)子表數(shù)據(jù)以及表單加載時，初始化子表單數(shù)據(jù)的業(yè)務(wù)場景。

參考文檔：明細(xì)關(guān)聯(lián)明細(xì)

5.4 子表單數(shù)據(jù)導(dǎo)出 & 子表單數(shù)據(jù)進(jìn)行報表分析 ？

由于子表單數(shù)據(jù)無法在數(shù)據(jù)管理頁內(nèi)展示分析且無法導(dǎo)出，所以需要將子表單數(shù)據(jù)于報表頁面表格內(nèi)進(jìn)行展示和導(dǎo)出。

參考文檔：子表單數(shù)據(jù)進(jìn)行報表分析

5.5 在子表單里面設(shè)置了跳轉(zhuǎn)函數(shù)，寫出來的這個函數(shù)的按鈕可以設(shè)置點擊一次之后就隱藏嗎 ？

可以在定制渲染里寫上以下代碼來實現(xiàn)。

export function onActionRender({ index, groupId, itemValue, actionKey }) {
 return <div id="anniu" onClick={()=>{
 document.getElementById('anniu').style.display = 'none'
 }}>操作按鈕名稱</div>;
}

5.6 子表單上移下移按鈕怎么設(shè)置 ？

這個是一個隱藏功能，去表單的編輯頁面開啟子表單的顯示排序就會出現(xiàn)上移下移按鈕，如圖所示：

5.7 是否可以校驗子表單中 多行文本組件中 其中一行文本的唯一性 ？

配置子表單內(nèi)組件的自定義校驗函數(shù)，遍歷子表單中的所有數(shù)據(jù)，跟當(dāng)前的數(shù)據(jù)來進(jìn)行比對

5.8 如何自動獲取子表單內(nèi)一共有多少條數(shù)據(jù)？

（1）使用一個子表單組件，一個數(shù)值組件，然后將數(shù)值組件的默認(rèn)值設(shè)置為 1，如圖：

（2）點擊子表單>>高級>>新建動作，需要創(chuàng)建兩個動作，一個是 onAddClick 點擊添加；一個是 onDelClick 點擊刪除，創(chuàng)建動作寫入代碼，如圖：

以下代碼可直接復(fù)制使用，注意：第一個括號里面輸入數(shù)值組件的唯一標(biāo)識，第二個括號里面輸入子表單的唯一標(biāo)識?？蓞⒖迹?）的設(shè)置

this.$('數(shù)值組件標(biāo)識').setValue(this.$('子表單標(biāo)識').getValue().length);

（3）先創(chuàng)建一個 onAddClick 點擊添加，如圖：

然后將上面的代碼復(fù)制過來，如下：

（4）新建一個 onDelClick 點擊刪除，也直接復(fù)制上面的代碼即可：

然后將上一段的代碼復(fù)制下來：

點擊保存后，效果展示如下：

刪除新增一項的數(shù)據(jù)，也會自動減少：

5.9 如何變量控制子表單的條數(shù)？

（1）拉取一個數(shù)值組件，在數(shù)值組件綁定動作「onChange值發(fā)生變化」

（2）在js頁面復(fù)制以下代碼

export function onChange({ value }) {
  console.log('onChange', value);
  let a = [];
  for(let i=0;i<value;i++){
      let b= {
        "textField_kurr4i2o" : "",   //子表單內(nèi)其他組件唯一標(biāo)識
      }
      a.push(b)
  }
  this.$("tableField_kurr4i2m").setValue(a)   //子表單組件唯一標(biāo)識
}

（3）實現(xiàn)效果