vue引入Excel表格插件的方法

npm install handsontable-pro @handsontable-pro/vue
npm install handsontable @handsontable/vue

import { HotTable } from ‘@handsontable-pro/vue'
import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from ‘handsontable-pro'

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

data () {
    return {
      list: [],
      root: 'test-hot',
      hotSettings: {
        data: [ // 數據可以是二維數組，也可以是數組對象
        ],
        startRows: 3, // 行列范圍
        startCols: 3,
        minRows: 20, // 最小行數
        minCols: 5, //最小列數
        maxRows: 20, // 最大行列
        maxCols: 20,//最大列數
        rowHeaders: true, // 行表頭，可以使佈爾值（行序號），可以使字符串（左側行表頭相同顯示內容，可以解析html），也可以是數組（左側行表頭單獨顯示內容）。
        colHeaders: ['賬戶等級', '賬戶名稱', '賬戶編號', '賬戶類別'], // 自定義列表頭or 佈爾值
        minSpareCols: 0, // 列留白
        minSpareRows: 0, // 行留白
        currentRowClassName: 'currentRow', // 為選中行添加類名，可以更改樣式
        currentColClassName: 'currentCol', // 為選中列添加類名
        autoWrapRow: true, // 自動換行
        className: 'htCenter htMiddle', // 默認單元格樣式，垂直居中
        contextMenu: {
          items: {
            // 'row_above': {
            //   name: '上方插入一行'
            // },
            // 'row_below': {
            //   name: '下方插入一行'
            // },
            // 'col_left': {
            //   name: '左方插入列'
            // },
            // 'col_right': {
            //   name: '右方插入列'
            // },
            'hsep1': '---------', // 提供分隔線
            'remove_row': {
              name: '刪除行'
            },
            'remove_col': {
              name: '刪除列'
            },
            'make_read_only': {
              name: '隻讀'
            },
            'borders': {
              name: '表格線'
            },
            'copy': {
              name: '復制'
            },
            'cut': {
              name: '剪切'
            },
            'commentsAddEdit': {
              name: '添加備註'
            },
            'commentsRemove': {
              name: '取消備註'
            },
            'freeze_column': {
              name: '固定列'
            },
            'unfreeze_column': {
              name: '取消列固定'
            },
            'mergeCells': {
              name: '合並單元格'
            },
            'alignment': {
              name: '文字位置'
            },
            '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, // 添加註釋  ?
        // cell: [ // ???
        //   {row: 1, col: 1, comment: {value: 'this is test'}}
        // ],
        customBorders: [], // 添加邊框
        columnSorting: true, // 排序
        stretchH: 'all', // 根據寬度橫向擴展，last:隻擴展最後一列，none：默認不擴展
        fillHandle: true, // 選中拖拽復制 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, // 固定左邊列數
        fixedRowsTop: 0, // 固定上邊列數
        mergeCells: [ // 合並
          // {row: 1, col: 1, rowspan: 3, colspan: 3}, // 指定合並，從（1,1）開始行3列3合並成一格
          // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ],
        columns: [ // 設置表頭名稱
          {
            data: 'acctLevel'
          },
          {
            data: 'acctName'
          },
          {
            data: 'acctNo'
          },
          {
            data: 'acctType'
          },
        ]
      }
    }
  },

components: {
    HotTable
 }，

methods: {
    swapHotData: function () {
      // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
      // 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) // 獲取合並單元格之後需要的參數