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 存儲到客戶端，待其他功能開發完成後一起發送給服務器。