三分钟vue插件handsontablejs教程

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