Handsontable -- 合并单元格

Handsontable-合并单元格

handsontable 帮助文档提供了添加钩子的方法：

• Source code
• Hooks
• Core#addHook

Example

// single callback, added locally
Handsontable.hooks.add('beforeInit', myCallback, hotInstance);

// single callback, added globally
Handsontable.hooks.add('beforeInit', myCallback);

// multiple callbacks, added locally
Handsontable.hooks.add('beforeInit', [myCallback, anotherCallback], hotInstance);

// multiple callbacks, added globally
Handsontable.hooks.add('beforeInit', [myCallback, anotherCallback]);

第一个参数是钩子名，第二个参数是钩子触发的方法，即处理函数，第三个参数是 Handsontable 实例对象。下面我们来添加两个钩子：

mounted() {
    this.hotRef = this.$refs.hypercell.hotInstance;
    Handsontable.hooks.add('afterMergeCells', this.mergeCells, this.hotRef);
    Handsontable.hooks.add('afterUnmergeCells', this.unMergeCells, this.hotRef);
}

注：一定要在 DOM 元素挂载完成后添加钩子，只有在这个生命周期之后才能通过 this.$refs.hypercell 正确的获取到 DOM 对象。参考 Vue 生命周期。

添加存储合并单元格数组的对象，添加 mergeCells 和 unMergeCells 方法：

·
·
·
mergeArrSubmit:[],
·
·
·
        methods:{
            mergeCells(){
                if (this.hotRef !==  undefined) {
                    this.mergeArrSubmit = JSON.parse(JSON.stringify(this.hotRef.getPlugin('mergeCells').mergedCellsCollection.mergedCells));
                    console.log(this.mergeArrSubmit);
                }
            },
            unMergeCells(){
                if (this.hotRef !==  undefined) {
                    this.mergeArrSubmit = JSON.parse(JSON.stringify(this.hotRef.getPlugin('mergeCells').mergedCellsCollection.mergedCells));
                    console.log(this.mergeArrSubmit);
                }
            },
        }

代码解读

JSON.parse(JSON.stringify())，重新开辟内存空间存储合并后的数组，然后赋值给 mergeArrSubmit 对象，直接赋值其实只是内存地址的应用，这样很容易导致数据紊乱。

测试

npm run dev

我们可以看到原来 Handsontable 记录合并的单元格的数据结构是数组：起始列 2，合并 2 个长度，起始行 7，合并 3 个长度。取消合并后，数组就被清空了。

版本提交

git add -A
git commit -m "合并单元格"

我们暂且把合并单元格数据 mergeArrSubmit 存储到客户端，待其他功能开发完成后一起发送给服务器。