如何在Google Sheets中将每行数据拆分为两行

解决思路 #

filter方法仅能对数组元素做保留/剔除的过滤操作，无法完成单元素到多元素的转换，因此不适用单行拆多行的场景。推荐使用Array.prototype.flatMap()实现需求：该方法可以将每一行原数据映射为包含两个子项的数组，再自动展平为一维数组，直接作为表格的数据源即可。

具体实现示例 #

假设通过query获取的原始表格数据结构如下：

const originalData = [
  { id: 1, name: '商品A', price: 100, stock: 20, desc: '商品A补充说明' },
  { id: 2, name: '商品B', price: 200, stock: 15, desc: '商品B补充说明' }
]

以拆分为「基础信息行+扩展信息行」为例，处理代码如下：

const processedTableData = originalData.flatMap(row => {
  // 第一行：基础信息行，增加rowType标识用于渲染时区分行类型
  const baseRow = {
    ...row,
    rowType: 'base',
    desc: ''
  }
  // 第二行：扩展信息行，隐藏基础字段仅保留需要展示的扩展内容
  const extRow = {
    ...row,
    rowType: 'ext',
    id: '',
    name: '',
    price: '',
    stock: ''
  }
  return [baseRow, extRow]
})

将处理后的processedTableData直接传给表格组件的数据源属性即可，可通过rowType字段为两种行设置不同的样式、跨列等属性。

如果运行环境不支持flatMap，可以用map+concat组合实现相同效果：

const processedTableData = [].concat(...originalData.map(row => [baseRow, extRow]))

特殊场景适配 #

• 若仅需要将单个单元格的长文本拆为两行展示，无需处理数据源，直接给对应单元格添加white-space: pre-line的CSS样式即可
• 若扩展行需要跨列展示，在表格的单元格渲染逻辑中判断rowType为ext时，给单元格设置colSpan属性为表格总列数即可

内容的提问来源于stack exchange，提问作者Robin Erard