handsontable12.0.0以上版本右键不展示菜单栏问题

vue2.0下载应用handsontable步骤

1.下载

npm install handsontable @handsontable/vue

2.引入

//在需要用到handsontable的地方引入
import { HotTable } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.css';// 在线编辑样式
import "handsontable/languages/zh-CN";//汉语包

3.使用 registerAllModules是右击菜单栏的关键

import { HotTable } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.css';// 在线编辑样式
import "handsontable/languages/zh-CN";
// register Handsontable's modules
registerAllModules();//重点：没有这行代码右键点击不出菜单栏
export default {
  components: {
    HotTable
  },
  data() {
    return {
      hotSettings: {
        language: 'zh-CN', // 官方汉化
        data: [
          [10, 11, 12, 13],
          [20, 11, 14, 13],
          [30, 15, 12, 13]],
        rowHeaders: ['2016', '2017', '2018'], // 纵向标题
        colHeaders: ["Ford", "Volvo", "Toyota", "Honda"], // 横向标题
        colWidths: 20, // 宽度/数组
        autoColumnSize: true, // true/false  自适应列大小
        manualColumnResize: true, // true/false 是否允许拖动
        manualRowResize: true, // true/false 是否允许拖动
        stretchH: 'all', // last/all/none  last:延伸最后一列,all:延伸所有列,none默认不延伸
        cell: [
          {row: 0, col: 0, className: 'htCenter htMiddle'}, // 右对齐垂直居中，只读
          {row: 1, col: 1, className: 'htCenter'}], // 左对齐
        // mergeCells: [{row: 起始行数, col: 起始列数, rowspan: 合并行数, colspan:合并列数 },...]// 单元格合并
        wordWrap: true, // 自动换行(默认)
        // 右键菜单展示
        contextMenu: true, // true/false/自定义数组 当值为true时，启用右键菜单，为false时禁用
        // contextMenu: { //手动更改contextMenu内容
        //   callback: function(key, selection, clickEvent) {
        //     // 所有选项的通用回调
        //     // console.log(key, selection, clickEvent);
        //   },
        //   items: {
        //     "copy": {
        //       name: '复制'
        //     },
        //     "remove_row": {
        //       name: '删除此行'
        //     },
        //     "row_below": {
        //       name: '新增记录',
        //       disabled: function() { // “禁用”可以是布尔值，也可以是函数
        //         // 当单击第一行时禁用选项
        //         return this.getSelectedLast()[0] === 0; // `this` === hot3
        //       }
        //     },
        //     "colors": { // 自定义选项
        //       name: 'Colors...',
        //       submenu: {
        //         // 带有项目子菜单的自定义选项
        //         items: [{
        //           // 键的形式必须是“parent_key:child_key”
        //           key: 'colors:red',
        //           name: 'Red',
        //           callback: function(key, selection, clickEvent) {
        //             setTimeout(function() {
        //               alert('You clicked red!');
        //             }, 0);
        //           }
        //         },
        //         {
        //           key: 'colors:green',
        //           name: 'Green'
        //         },
        //         {
        //           key: 'colors:blue',
        //           name: 'Blue'
        //         }
        //         ]
        //       }
        //     }
        //   }
        // },
        dropdownMenu: true, 
      }
    }
  },
  mounted() { 
  }, 

handsontable中文文档