VueにExcelテーブルプラグインを導入する方法

handsontable-pro を npm でインストールします @handsontable-pro/vue
npm をインストール handsontable @handsontable/vue

'@handsontable-pro/vue' から { HotTable } をインポートします。
'…/…/node_modules/handsontable-pro/dist/handsontable.full.css' をインポートします
'handsontable-pro' から Handsontable をインポートします

<div id="hotTable" class="hotTable">
    <HotTable ref="hotTableComponent" :settings="hotSettings"></HotTable>
</div>

データ （） {
    戻る {
      リスト: [],
      ルート: 'test-hot'、
      ホット設定: {
        data: [ // データは2次元配列または配列オブジェクトになります],
        startRows: 3, // 行と列の範囲 startCols: 3,
        minRows: 20, // 行の最小数minCols: 5, // 列の最小数maxRows: 20, // 行と列の最大数maxCols: 20, // 列の最大数rowHeaders: true, // 行ヘッダーはブール値（行番号）、文字列（左の行ヘッダーには同じコンテンツが表示され、HTML を解析できます）、または配列（左の行ヘッダーにはコンテンツが個別に表示されます）にすることができます。
        colHeaders: ['アカウント レベル', 'アカウント名', 'アカウント番号', 'アカウント カテゴリ'], // カスタム列ヘッダーまたはブール値minSpareCols: 0, // 列空白minSpareRows: 0, // 行空白currentRowClassName: 'currentRow', // 選択した行のクラス名を追加します。スタイルを変更できますcurrentColClassName: 'currentCol', // 選択した列のクラス名を追加しますautoWrapRow: true, // 自動行折り返しclassName: 'htCenter htMiddle', // デフォルトのセル スタイル、垂直中央contextMenu: {
          アイテム: {
            // '上の行': {
            // name: '上に行を挿入'
            // },
            // 'row_below': {
            // name: '下に行を挿入'
            // },
            // 'col_left': {
            // 名前: '左に列を挿入'
            // },
            // 'col_right': {
            // 名前: '右に列を挿入'
            // },
            'hsep1': '---------', // 区切り線を指定します 'remove_row': {
              名前: '行を削除'
            },
            '列を削除': {
              名前: '列を削除'
            },
            '読み取り専用にする': {
              名前: '読み取り専用'
            },
            '境界線': {
              名前:「テーブルライン」
            },
            'コピー'： {
              名前: 'コピー'
            },
            'カット'： {
              名前: 「カット」
            },
            'コメント追加編集': {
              名前: 'メモを追加'
            },
            'コメント削除': {
              名前: 'メモをキャンセル'
            },
            '列を固定': {
              名前: '固定列'
            },
            '列の凍結解除': {
              名前: '列の固定を解除'
            },
            'セルの結合': {
              名前: 'セルの結合'
            },
            '配置': {
              名前: 'テキストの位置'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // このメソッドはデータが変更されたときにトリガーされます // console.log(this.getSourceData())
          this.list = this.getSourceData() // テーブル内のデータを取得します // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // テーブル内の結合されたセルのパラメータを取得します},
        manualColumnFreeze: true, // 列を手動で固定しますか?
        manualColumnMove: true, // 列を手動で移動しますmanualRowMove: true, // 行を手動で移動しますmanualColumnResize: true, // 列の間隔を手動で変更しますmanualRowResize: true, // 行の間隔を手動で変更しますcomments: true, // コメントを追加しますか?
        // セル: [ // ???
        // {行: 1、列: 1、コメント: {値: 'これはテストです'}}
        // ],
        customBorders: [], // 境界線を追加 columnSorting: true, // ソート StretchH: 'all', // 幅に応じて水平に拡張、last: 最後の列のみ拡張、none: デフォルトでは拡張しない fillHandle: true, // 選択してドラッグしてコピー 可能な値: true、false、「horizo​​ntal」、「vertical」
        fixedColumnsLeft: 0, // 左の列数を固定 fixedRowsTop: 0, // 上の列数を固定 mergeCells: [ // 結合 // {row: 1, col: 1, rowspan: 3, colspan: 3}, // 結合を指定します。(1,1) から始めて、行 3 と列 3 を 1 つのグリッドに結合します // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ]、
        columns: [ // テーブルヘッダー名を設定する {
            データ: 'acctLevel'
          },
          {
            データ: 'acctName'
          },
          {
            データ: 'acctNo'
          },
          {
            データ: 'acctType'
          },
        ]
      }
    }
  },

コンポーネント:
    ホットテーブル
 },

メソッド: {
    swapHotData: 関数 () {
      // Handsontable インスタンスは、ラッパー コンポーネントの `hotInstance` プロパティに保存されます。
      // this.$refs.hotTableComponent.hotInstance.loadData([['new', 'data']])
      console.log(this.$refs.hotTableComponent.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells)
    }
},

this.$refs.hotTableComponent.hotInstance // テーブルデータを取得し、テーブルメソッドを呼び出します。****** はテーブルを指します。getPlugin('MergeCells').mergedCellsCollection.mergedCells) // セルを結合した後に必要なパラメータを取得します。