3分、vueExcel表プラグインhandsontable.jsチュートリアル

npm handsontableのインストール

npm install handsontable @handsontable/vue

handsontableの作成

ハンソンケーブルの導入

import {HotTable} from '@handsontable/vue';
import Handsontable from 'handsontable';

構成の追加

  hotSettings: {
          // language:'zh-CN',
          licenseKey: 'non-commercial-and-evaluation',//      
          // data: Handsontable.helper.createSpreadsheetData(10, 26),//       
          data: [
            ['', '  ', '  ', '  '],
            ["2016", 10, 11, 12,],
            ["2017", 20, 11, 14,],
            ["2018", 30, 15, 12,]
          ],
          startRows: 3,//     , data     (    minRows , minRows  )
          startCols: 10,//     , data     (    minCols , minCols  )
          minRows: 5,//    (           ,     )
          minCols: 16,//    (           ,     )
          minSpareCols: 1,//       
          minSpareRows: 1,//       
          colHeaders: true,//       ,   A,B,C   ,  [' 1',' 2']       
          rowHeaders: true,//       ,   1,2,3   ,  [' 1',' 2']       
          // colWidths: 49,//   
          dropdownMenu: true,//        ,       
          // dropdownMenu: {
          //   items: {
          //     'row_above': {
          //       name: '      '
          //     },
          //     'row_below': {
          //       name: '      '
          //     },
          //     'col_left':{
          //       name: '      '
          //     },
          //     'col_right':{
          //       name: '      '
          //     },
          //     'remove_row':{
          //       name: '    '
          //     },
          //     'remove_col':{
          //       name: '    '
          //     },
          //     'alignment':{
          //       name: '    '
          //     },
          //     'make_read_only':{
          //       name:'  '
          //     },
          //     // 'borders':{
          //     //   name: '  '
          //     // },
          //     'copy':{
          //       name: '  '
          //     },
          //     'cut':{
          //       name: '  '
          //     },
          //     'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
          //     'clear_custom': {
          //       name: '         ',
          //       callback: function () {
          //         this.clear()
          //       }
          //     }
          //   }
          // },
          className: 'htCenter',//         (htLeft,htRight,htCenter)
          currentRowClassName: 'my-selectRow', //         class  
          currentColClassName: 'my-selectCol', //         class  
          autoWrapRow: true, //        (     colWidths   )
          fixedRowsTop: 1,//         ,       (      )
          fixedColumnsLeft: 1,//         ,       (      )
          fillHandle: true,//          (true,false,'horizontal'    ,'vertical'    )
          //autoRowSize: true,
          //autoColumnSize: true,
          // highlightedRows:[],
          contextMenu: {//          
            items: {
              'row_above': {
                name: '      '
              },
              'row_below': {
                name: '      '
              },
              'col_left': {
                name: '      '
              },
              'col_right': {
                name: '      '
              },
              'remove_row': {
                name: '    '
              },
              'remove_col': {
                name: '    '
              },
              'alignment': {
                name: '    '
              },
              'make_read_only': {
                name: '  '
              },
              // 'borders':{
              //   name: '  '
              // },
              'copy': {
                name: '  '
              },
              'cut': {
                name: '  '
              },
              'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
              'clear_custom': {
                name: '         ',
                callback: function () {
                  this.clear()
                }
              }
            }
          }
        },

最後の効果