使用区域模板

{
  list: [
    {
      detail: data[0],
    },
    {
      detail: data[1],
    },
    {
      detail: data[2],
    },
  ];
}//可以循环构建

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var dialogSS;
var editorDialog = document.getElementById("editorDialog");
var dialogOK = document.getElementById("dialogOK");
var dialogCancel = document.getElementById("dialogCancel");

var renderSheet = spread.getActiveSheet();
renderSheet.defaults.rowHeight = 207;

var templateSheet = new GC.Spread.Sheets.Worksheet();
templateSheet.fromJSON(templatesheetjson);
spread.addSheet(1, templateSheet);
templateSheet.setFormatter(2, 2, "=IMAGE(@)");

renderSheet.suspendPaint();
var celltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);

// renderSheet.setCellType(0, 1, celltype);
// renderSheet.setBindingPath(0, 1, "detail")

renderSheet.setRowHeight(0, 10);
renderSheet.setColumnWidth(0, 440);
// renderSheet.setColumnWidth(1, 440)
var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource({
  list: [
    {
      detail: data[0],
    },
    {
      detail: data[1],
    },
    {
      detail: data[2],
    },
  ];
});

renderSheet.setRowHeight(1, 30);

// 添加表格
var table = renderSheet.tables.add("tableRecordds", 1, 0, 4, 1);
table.autoGenerateColumns(false);

var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn1.name("Detail");
tableColumn1.dataField("detail");
table.bindColumns([tableColumn1]);
table.bindingPath("list");

// 数据绑定
renderSheet.setDataSource(dataSource);
renderSheet.getRange(2, 0).cellType(celltype);
// 设定style
copyTableStyle(renderSheet, table);
renderSheet.resumePaint();

function copyTableStyle(sheet, table) {
  var range = table.dataRange();
  var rowHeight = sheet.getRowHeight(range.row);
  for (var i = 1; i < range.rowCount; i++) {
    // 复制样式
    sheet.copyTo(
      range.row + i - 1,
      range.col,
      range.row + i,
      range.col,
      1,
      range.colCount,
      GC.Spread.Sheets.CopyToOptions.style
    );
    // 复制公式
    sheet.copyTo(
      range.row + i - 1,
      range.col,
      range.row + i,
      range.col,
      1,
      range.colCount,
      GC.Spread.Sheets.CopyToOptions.formula
    );
    // 复制单元格合并
    sheet.copyTo(
      range.row + i - 1,
      range.col,
      range.row + i,
      range.col,
      1,
      range.colCount,
      GC.Spread.Sheets.CopyToOptions.span
    );
    // 设置行高
    sheet.setRowHeight(range.row + i, rowHeight);
  }
}

// 双击单元格
spread.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (s, e) {
  var sheet = e.sheet,
    row = e.row,
    col = e.col;
  var cellType = sheet.getCellType(row, col);
  if (
    cellType &&
    cellType instanceof GC.Spread.Sheets.CellTypes.RangeTemplate
  ) {
    // 如果是我们自己的区域模板
    editRangeCell(sheet, row, col);
  }
});

// 初始化子Spread
function initDialogSpread() {
  if (!dialogSS) {
    dialogSS = new GC.Spread.Sheets.Workbook(
      document.getElementById("dialogSS")
    );
  }

  dialogSS.options.tabStripVisible = false;
  dialogSS.refresh();
}

function editRangeCell(sheet, row, col) {
  setTimeout(function () {
    initDialogSpread();
    setEditorValue(sheet, row, col);
  }, 10);
  editorDialog.style.display = "block";
}

function setEditorValue(sheet, row, col) {
  var cellType = sheet.getCellType(row, col);
  if (dialogSS && cellType) {
    var json = cellType.toJSON();
    var editorSheet = dialogSS.getActiveSheet();
    editorSheet.fromJSON(JSON.parse(json.resolvor.templatejson));
    console.log(JSON.parse(json.resolvor.templatejson));
    var value = JSON.parse(JSON.stringify(sheet.getValue(row, col)));
    var dataSource = new GC.Spread.Sheets.Bindings.CellBindingSource(value);
    editorSheet.setDataSource(dataSource);
    console.log(editorSheet.recalcAll);
    editorSheet.recalcAll(true);
  }
}

// 关闭子图
function closeDialog() {
  editorDialog.style.display = "none";
}
// 取消按钮逻辑
dialogCancel.onclick = function () {
  closeDialog();
};
// 确认按钮逻辑
dialogOK.onclick = function () {
  var editorSheet = dialogSS.getActiveSheet();
  var cellValue = editorSheet.getDataSource().getSource();// 获取绑定数据

  var renderSheet = spread.getActiveSheet();
  renderSheet.setValue(// 为单元格赋值
    renderSheet.getActiveRowIndex(),
    renderSheet.getActiveColumnIndex(),
    cellValue
  );
  closeDialog();
  console.log(JSON.stringify(renderSheet.getDataSource().getSource()));
};

<!doctype html>
<html>

<head>
    <title>SpreadJS in TypeScript</title>
    <link rel="stylesheet" type="text/css"
        href="node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
        System.import('./src/app');
    </script>
    <style>
        #editorDialog {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #aaaaaaaa;
            display: none;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>
    <div id="editorDialog">
        <div style="height: 80%; width: 80%;margin: 50px auto;background-color:white">
            <button id='dialogOK'>确定</button>
            <button id='dialogCancel'>取消</button>
            <div id='dialogSS' style="width:100%;height:90%;border:1px solid darkgray"></div>
        </div>
    </div>
</body>

</html>