三分鐘,vue插件handsontable.js教程

npm 安裝handsontable

npm install handsontable @handsontable/vue

創建handsontable

<hot-table :settings="hotSettings"></hot-table>

引入hansontable

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()
                }
              }
            }
          }
        },