So führen Sie das Excel-Tabellen-Plugin in Vue ein

npm installiere handsontable-pro @handsontable-pro/vue
npm installiere handsontable @handsontable/vue

importiere { HotTable } von '@handsontable-pro/vue'
importiere '…/…/node_modules/handsontable-pro/dist/handsontable.full.css'
Handsontable aus „handsontable-pro“ importieren

<div id="heißeTabelle" Klasse="heißeTabelle">
    <HotTable ref="hotTableComponent" :settings="hotSettings"></HotTable>
</div>

Daten () {
    zurückkehren {
      Liste: [],
      Wurzel: 'test-hot',
      hotSettings: {
        Daten: [ // Daten können ein zweidimensionales Array oder ein Array-Objekt sein],
        startRows: 3, // Zeilen- und Spaltenbereich startCols: 3,
        minRows: 20, // Mindestanzahl von ZeilenminCols: 5, // Mindestanzahl von SpaltenmaxRows: 20, // Maximale Anzahl von Zeilen und SpaltenmaxCols: 20, // Maximale Anzahl von SpaltenrowHeaders: true, // Zeilenüberschriften können Boolesche Werte (Zeilennummern), Zeichenfolgen (die linken Zeilenüberschriften zeigen denselben Inhalt an und können HTML analysieren) oder Arrays (die linken Zeilenüberschriften zeigen den Inhalt separat an) sein.
        colHeaders: ['Kontoebene', 'Kontoname', 'Kontonummer', 'Kontokategorie'], // Benutzerdefinierte Spaltenüberschrift oder Boolescher WertminSpareCols: 0, // Spalte leerminSpareRows: 0, // Zeile leercurrentRowClassName: 'currentRow', // Fügen Sie einen Klassennamen für die ausgewählte Zeile hinzu. Sie können den Stil änderncurrentColClassName: 'currentCol', // Fügen Sie einen Klassennamen für die ausgewählte Spalte hinzuautoWrapRow: true, // Automatischer ZeilenumbruchclassName: 'htCenter htMiddle', // Standardzellenstil, vertikal zentriertcontextMenu: {
          Artikel: {
            // 'Zeile_oben': {
            // Name: 'Füge oben eine Zeile ein'
            // },
            // 'Zeile_unten': {
            // Name: 'Füge unten eine Zeile ein'
            // },
            // 'Spalte_links': {
            // Name: 'Spalte links einfügen'
            // },
            // 'Spalte_rechts': {
            // Name: 'Spalte rechts einfügen'
            // },
            'hsep1': '---------', // Trennzeile angeben 'remove_row': {
              Name: 'Zeile löschen'
            },
            'Spalte_entfernen': {
              Name: 'Spalte löschen'
            },
            'schreibgeschützt machen': {
              Name: „schreibgeschützt“
            },
            'Grenzen': {
              Name: 'Tabellenzeile'
            },
            'Kopie': {
              Name: "Kopieren"
            },
            'schneiden': {
              Name: 'Schnitt'
            },
            'commentsAddEdit': {
              Name: „Notizen hinzufügen“
            },
            'Kommentare entfernen': {
              Name: 'Notiz abbrechen'
            },
            'Spalte_einfrieren': {
              Name: 'Feste Spalten'
            },
            'Spalte_freigeben': {
              Name: 'Spaltenfixierung aufheben'
            },
            'Zellen zusammenführen': {
              Name: 'Zellen zusammenführen'
            },
            'Ausrichtung': {
              Name: 'Textposition'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // Diese Methode wird ausgelöst, wenn sich die Daten ändern // console.log(this.getSourceData())
          this.list = this.getSourceData() // Daten in der Tabelle abrufen // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // Parameter der zusammengeführten Zellen in der Tabelle abrufen},
        manualColumnFreeze: true, // Spalten manuell reparieren?
        manualColumnMove: true, // Spalten manuell verschiebenmanualRowMove: true, // Zeilen manuell verschiebenmanualColumnResize: true, // Spaltenabstand manuell ändernmanualRowResize: true, // Zeilenabstand manuell änderncomments: true, // Kommentare hinzufügen?
        // Zelle: [ // ???
        // {Zeile: 1, Spalte: 1, Kommentar: {Wert: 'Dies ist ein Test'}}
        // ],
        customBorders: [], // Ränder hinzufügen columnSorting: true, // Sortierung stretchH: 'all', // Horizontal der Breite entsprechend erweitern, last: nur die letzte Spalte erweitern, none: standardmäßig nicht erweitern fillHandle: true, // Auswählen und ziehen zum Kopieren mögliche Werte: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, // Anzahl der Spalten links korrigiert fixedRowsTop: 0, // Anzahl der Spalten oben korrigiert mergeCells: [ // Zusammenführen // {row: 1, col: 1, rowspan: 3, colspan: 3}, // Zusammenführung angeben, beginnend bei (1,1), werden Zeile 3 und Spalte 3 zu einem Raster zusammengeführt // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ],
        columns: [ // Setzt den Namen der Tabellenüberschrift {
            Daten: "acctLevel"
          },
          {
            Daten: "acctName"
          },
          {
            Daten: "acctNo"
          },
          {
            Daten: „acctType“
          },
        ]
      }
    }
  },

Komponenten:
    HotTable
 },

Methoden: {
    swapHotData: Funktion () {
      // Die Handsontable-Instanz wird unter der Eigenschaft „hotInstance“ der Wrapper-Komponente gespeichert.
      // dies.$refs.hotTableComponent.hotInstance.loadData([['neu', 'Daten']])
      Konsole.log(diese.$refs.hotTableComponent.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells)
    }
},

this.$refs.hotTableComponent.hotInstance // Tabellendaten abrufen, Tabellenmethode aufrufen, ****** zeigt auf die Tabelle getPlugin('MergeCells').mergedCellsCollection.mergedCells) // Nach dem Zusammenführen der Zellen die benötigten Parameter abrufen