Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

1、常用配置

hotSettings: {
        language: 'zh-CN', // 语言设置
        licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
        width: 'auto', // 表格宽度
        height: '400', // 表格高度、设置以后才会出现scroll
        data: Handsontable.helper.createSpreadsheetData(10, 26), // 列表初始化数据（Handsontable.helper.createSpreadsheetData(10, 26)）
        startRows: 2, // 初始化行数,无data属性时生效(该值小于minRows时,以minRows为准)
        startCols: 0, // 初始化列数,无data属性时生效(该值小于minCols时,以minCols为准)
        minRows: 2, // 最少行数(当初始化数据小于该值时,以该值为准)
        minCols: 0, // 最少列数(当初始化数据小于该值时,以该值为准)
        minSpareCols: 0, // 列的最小留白数
        minSpareRows: 0, // 行的最小留白数
        colHeaders: [], // 是否展示列表头,默认true就是A,B,C等字母,可以['列1','列2']进行自定义展示
        rowHeaders: [], // 是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
        colWidths: 50, // 列宽度
        rowHeights: 80, // 行高度
        rowHeaderWidth: 150, // 行表头宽度
        dropdownMenu: false, // 表头展示下拉菜单,可以自定义展示
        className: 'htCenter htMiddle', // 单元格文字对齐方式(htLeft,htRight,htCenter)
        currentRowClassName: 'my-selectRow', // 给选中行添加自定义class类名
        currentColClassName: 'my-selectCol', // 给选中列添加自定义class类名
        autoWrapRow: true, // 文字是否自动换行(当没有设置colWidths时生效)
        fixedRowsTop: 0, // 列表内容从上面开始,固定定位的行数(不包含行表头)
        fixedColumnsLeft: 0, // 列表内容从左面开始,固定定位的列数(不包含列表头)
        fillHandle: true, // 是否开启拖拽复制操作(true,false,'horizontal'水平复制,'vertical'垂直复制)
        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: '只读'
            },
            copy: {
              name: '复制'
            },
            cut: {
              name: '剪切'
            },
            separator: Handsontable.plugins.ContextMenu.SEPARATOR,
            clear_custom: {
              name: '清空所有单元格数据',
              callback: function() {
                this.clear()
              }
           }
        }
     }
  },

2、遇到的坑

1）当将表格嵌套在弹框（dialog）中时，鼠标右键展示的菜单栏会被弹框遮盖，原因是弹框的 z-index 大于菜单栏的 z-index。

解决办法是修改表格的 z-index 如下：

<style lang="scss">
.htContextMenu:not(.htGhostTable){
  z-index:3000 !important;
}
</style>

2）无法设置列表头的高度和行表头的垂直居中

目前还没找到解决办法。

后续可能会遇到更多的问题，持续更新！