如何在React中实现类似MS Word的选格创建表格并输出二维数组

• 中文关键词：表格网格选择器、行列规格点选组件、Word式表格尺寸选择器、拖拽选行列建表格组件
• 英文关键词：table grid picker、table dimension selector、table size picker（搜索海外第三方包时用英文关键词更精准）

不同前端技术栈均有成熟的现成组件，不需要从零开发：

• React 技术栈：可直接使用 react-table-grid-picker 轻量组件，支持自定义最大可选行列数，选中后会直接返回行列数值，你只需要配合简单的生成逻辑就能得到目标格式的数组：

// 拿到返回的行列值后生成目标二维数组的示例代码
const generateTableArray = (rowCount, colCount) => {
  return Array.from({ length: rowCount }, (_, rowIdx) => {
    return Array.from({ length: colCount }, (_, colIdx) => rowIdx * colCount + colIdx + 1)
  })
}
// 3列2行调用示例：generateTableArray(2,3) 输出 [[1,2,3],[4,5,6]]

• Vue 技术栈：可使用 vue-table-grid-select 组件，支持Vue2/Vue3，同样可以直接拿到选中的行列值，配合上面的生成逻辑即可使用，也可以直接搜索基于Element UI/Element Plus的二次封装行列选择器组件，适配性更高。
• 原生JS/无框架场景：可以使用轻量的 vanilla-table-picker 包，无任何依赖，直接引入即可使用，监听选中事件拿到行列值后生成数组即可。

内容的提问来源于stack exchange，提问作者Nguyễn Tuấn Kiệt