vue Excel表のプラグインを導入する方法

本論文の例では、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) //               

注意：インターフェイスが必要です。データを直接に取得して、this.hotSettingsの下でdataに値を賦課すればいいです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。