子表單

1. 什么是子表單

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

2. 適用場(chǎng)景

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

3. 基礎(chǔ)功能

3.1 排列方式

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

3.1.1 表格方式

表格

展示效果：

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

3.1.2 平鋪方式

平鋪

效果如圖：

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

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

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

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

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

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

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

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

子表單最大條數(shù)

3.5 子表列寬

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

自定義子表單列寬

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

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

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

訪問(wèn)頁(yè)面

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

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

批量導(dǎo)入頁(yè)面

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

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

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

• 表單詳情頁(yè)的子表單內(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)過(guò)數(shù)據(jù)內(nèi)容編輯，子表內(nèi)容支持重新導(dǎo)回到宜搭表單數(shù)據(jù)中

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

表單頁(yè)面

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

Excel 表格頁(yè)面

4. 高級(jí)功能

4.1 操作列

4.1.1 新建操作列

新建操作列之后，可以點(diǎn)擊編輯去操作綁定動(dòng)作

操作列

效果如圖：

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

參考 動(dòng)作設(shè)置

操作--項(xiàng)目-0

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

JS 面板

4.1.3 定制渲染

支持 jsx

定制渲染-綁定動(dòng)作

效果如圖：

5. 常見問(wèn)題

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

您好，需要配置一個(gè)刪除動(dòng)作，如下圖所示：

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

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

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

參考代碼：

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

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

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

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

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

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

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

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

可以在定制渲染里寫上以下代碼來(lái)實(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è)置 ？

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

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

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

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

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

（2）點(diǎn)擊子表單>>高級(jí)>>新建動(dòng)作，需要?jiǎng)?chuàng)建兩個(gè)動(dòng)作，一個(gè)是 onAddClick 點(diǎn)擊添加；一個(gè)是 onDelClick 點(diǎn)擊刪除，創(chuàng)建動(dòng)作寫入代碼，如圖：

以下代碼可直接復(fù)制使用，注意：第一個(gè)括號(hào)里面輸入數(shù)值組件的唯一標(biāo)識(shí)，第二個(gè)括號(hào)里面輸入子表單的唯一標(biāo)識(shí)。可參考（3）的設(shè)置

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

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

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

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

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

點(diǎn)擊保存后，效果展示如下：

刪除新增一項(xiàng)的數(shù)據(jù)，也會(huì)自動(dòng)減少：

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

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

（2）在js頁(yè)面復(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)識(shí)
      }
      a.push(b)
  }
  this.$("tableField_kurr4i2m").setValue(a)   //子表單組件唯一標(biāo)識(shí)
}

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