如何把下列数组转成二维数组，二维数组用来生成表头？

Question

接口拿到一个数组，需要根据该数组生成复杂表格的表头。

数组举例：

// 第一个上中下为一月份 第二个上中下为二月份，以此类推
const dimensions = ['年份', '上', '中', '下', '上', '中', '下']
const cols =
    [
      {
        label: '年份',
        field: '0',// dimensions 中年份的下标为 0
        rowspan: 2,
      },
      {
        label: '一月',
        colspan: 3,
      },
      {
        label: '二月',
        colspan: 3,
      },
    ],
    [
      {
        label: '上',
        field: '1', // dimensions 中年份的一月份的上旬“上”的下标为 1
        rowspan: 1, // 默认的跨行
        colspan: 1, // 默认的跨列
      },
      {
        label: '中',
        field: '2', // dimensions 中年份的一月份的上旬“中”的下标为 2
      },
      {
        label: '下',
        field: '3',
      },
      {
        label: '上',
        field: '4',
      },
      {
        label: '中',
        field: '5',
      },
      {
        label: '下',
        field: '6',
      },
    ],
  ]

最后表头的标头的样式：

会把 cols 传入组件，生成表头。
希望写一个函数，输入 dimensions，返回 cols。

刚好是月份，才按照上中下合并单元格，如果不是上中下，也可能需要合并。重要的不是按照上中下合并，而是 dimensions 第 i 和 i + n 元素跨列合并，或者 跨行。

['年份', '上', '中', '下', '上', '中', '下']

比如，希望 “年上”跨行，“中下上”跨列，“中下”跨行，就不是按照上中下是月份的规则合并。

Answer 1

js 新手，试答一下

输入

['中','下',  '上',  '年份',  '上','中','下',  '年份',  '上','中',  '中','下']

输出

[
  [
    { label: '一月', colspan: 2 },
    { label: '二月', colspan: 1 },
    { label: '年份', field: 3, rowspan: 2 },
    { label: '一月', colspan: 3 },
    { label: '年份', field: 7, rowspan: 2 },
    { label: '一月', colspan: 2 },
    { label: '二月', colspan: 2 }
  ],
  [
    // 下面全标上 { rowspan: 1, colspan: 1 } 应该没事吧？
    { label: '中', field: 0, rowspan: 1, colspan: 1 },
    { label: '下', field: 1, rowspan: 1, colspan: 1 },
    { label: '上', field: 2, rowspan: 1, colspan: 1 },
    { label: '上', field: 4, rowspan: 1, colspan: 1 },
    { label: '中', field: 5, rowspan: 1, colspan: 1 },
    { label: '下', field: 6, rowspan: 1, colspan: 1 },
    { label: '上', field: 8, rowspan: 1, colspan: 1 },
    { label: '中', field: 9, rowspan: 1, colspan: 1 },
    { label: '中', field: 10, rowspan: 1, colspan: 1 },
    { label: '下', field: 11, rowspan: 1, colspan: 1 }
  ]
]

代码

let dimensions = ['中','下',  '上',  '年份',  '上','中','下',  '年份',  '上','中',  '中','下'];

let groups = Array.from(dimensions.join('').replaceAll('份', '').matchAll(/年|(?=.)上?中?下?/g), m => [m[0], m.index]);

console.log([
  groups.reduce((a, [s, i]) => a.concat(s !== '年' ? {m: 1 + a.at(-1)?.m || 1, colspan: s.length} : {m: 0, field: i, rowspan: 2}), [])
        .map(({m, ...r}) => ({label: [...'年一二三四五六七八九十', '十一', '十二'][m] + '月份'[+!m], ...r})),
  groups.reduce((a, [s, i]) => s !== '年' ? a.concat([...s].map((c, j) => ({label: c, field: i + j, rowspan: 1, colspan: 1}))) : a, []),
]);

Answer 2

一定是第一个年份，然后上中下不断循环吗？有没有断掉的情况，如果是固定的都有那就很简单了：

function arr2cols(list) {
  const num = list.slice(1).length
  return [
    [
      {
        label: '年份',
        field: 0,
        rowspan: 2,
      },
    ].concat(
      Array.from({length: num/3}, (_,i) => ({label: ['一','二','三','四','五','六','七','八','九','十','十一','十二'][i]+'月', colspan: 3}))
    ),
    Array.from({length: num}, (_, i) => ({label: ['上','中','下'][i%3], field: i+1}))
  ]
}

arr2cols(['年份', '上', '中', '下', '上', '中', '下'])