Handsontable - merge cells

Merge Cells

Handsontable- merge cells

The handsontable help document provides a way to add hooks:

Insert picture description here
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]);

The first parameter is the hook name, the second parameter is the method triggered by the hook, that is, the processing function, and the third parameter is the Handsontable instance object. Let's add two hooks:

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

Note : The hook must be added after the DOM element is mounted. Only after this life cycle can the DOM object be correctly obtained through this.$refs.hypercell. Refer to the Vue life cycle.

Add an object to store the merged cell array, and add mergeCells and unMergeCells methods:

·
·
·
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);
                }
            },
        }

Code interpretation

JSON.parse(JSON.stringify()) reopens memory space to store the merged array, and then assigns it to the mergeArrSubmit object. The direct assignment is actually the application of the memory address, which can easily lead to data disorder.

test

npm run dev

Insert picture description here
We can see that the original Handsontable record merged cell data structure is an array: starting column 2, merged 2 lengths, starting row 7, merged 3 lengths. After unmerging, the array is emptied.

Version submission

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

Let us temporarily store the merged cell data mergeArrSubmit to the client, and send it to the server together after the development of other functions is completed.