狗B百度,这么简单的问题找不到一个正常的解决方案,傻逼吧???
经过我一早上不懈的努力,终于找到了合并单元格的正确配置项(还是我自己猜出来的),合并单元格在菜单里的正确名称叫做mergeCells,这是通过参考菜单汉化包里的内容自己猜出来的。配置如下
hotSettings: {
data: [ // 数据,可以是数据,对象
['', '', '', '', '', ''],
['', '', '', '', '', ''],
['', '', '', '', '', '']
colWidths: 64, // 列宽 忽略
rowHeights: [47, 34, 34],//忽略
colHeaders: ['主', '夹1', '夹2', '夹3', '夹4', '夹5'], // 行表头 忽略
contextMenu: [
'col_left',
'col_right',
'remove_col',
'mergeCells' //没错就是他!!!菜单配置项加上他就能合并了
mergeCells: true //别忘了还有他!!!
效果如下所示:拆分和合并只需要一个参数就够了。
背景:vue项目中使用了handsontable做报表,表格比较复杂。后端返回表格数据,在前端整理成handsontable需要的数据格式后展示。涉及到了查询、根绝查询结果动态渲染表头、导出等功能。
因为当时搞了好久,所以这里详细记录下遇到的问题。
写了一个handsontable的小demo放在github上了 【传送门】,包含以上功能,项目启动后的访问地址:http://localhost:8080/#/hotTableComp。
handson介绍
handsontable引用方式:cdn or
Handsontable-MergeHotGrid
Handsontable实现了行添加/删除,标题/行合并,基于columnInfo信息的单元格公式功能。Handsontable 0.17.0,ruleJS0.0.3,Underscore.js 1.8.2,TreeModel 1.0.4,我喜欢的字体4.4.0库添加。
rowData定义
columnInfo定义
创建动手操作
行添加/删除: :
标头/行合并和单元格公式: :
行添加/删除和标题合并: :
<title>handsontable demo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/handsontable.full.css"&...
1.合并单元格获取合并后的数据:
<HotTable :root="root" :settings="hotSettings" v-if="showTable" ref="hottable"
style="width:100%;height:300px;overflow:hidden;"></HotTable&g...
最近在浏览时发现了一个开源项目handsontable,功能相当强大。虽然handsontable是dom做的,但是不妨碍其类似于canvas那种excel的操作手感。