vue中使用handsontable插件，以及遇到的问题（如何调

handsontable的文档看的晕乎乎的，然后就开始使用了

一、安装

该组件需要 Handsontable 库才能工作。使用 npm 安装软件包

npm install handsontable @handsontable/vue

二、使用

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

import { HotTable } from '@handsontable/vue'

import SheetClip from 'sheetclip'

import { registerAllModules } from 'handsontable/registry'

import { ContextMenu } from 'handsontable/plugins/contextMenu'

import 'handsontable/dist/handsontable.full.css'

// register Handsontable's modules

registerAllModules()

我们设置hotSettings

contextMenu是配置的有击出现的菜单

1、如何指定某行某列不现实某个菜单

利用disabled里的回调函数实现如上图

2、右侧菜单里默认有复制、剪切功能，但是没有粘贴，粘贴需要调用copyPaste插件实现

上图中的this就是handsontable实例

plugin.paste(clipboardCache)中clipboardCache是复制的时候我们暂存起来的复制的单元格，在全局设置的clipboardCache变量

上图中的就是复制方法，参数changes就是复制的单元格，这里用了SheetClip插件转化数据，因为我们可以复制多行多列，changes是个二维数组，SheetClip可以把二维数组变成字符串

粘贴方法调用plugin.paste(clipboardCache)需要传入的clipboardCache需要是字符串

此时，右侧菜单的粘贴就实现了

3、如何点击撤销、复制、粘贴按钮主动调用handsontable插件功能

比如点击撤销如果撤销我们对单元格的操作呢？

1、直接调用右侧菜单中的撤销

2、调用表格实例方法中的撤销方法

const plugin = this.$refs.hotTableComponent.hotInstance.getPlugin('contextMenu')

 plugin.executeCommand('undo')

这样做就是相当于调用了右侧菜单中的undo,前提是我们右侧菜单配置了undo撤销哦

第二个方法是直接this.$refs.hotTableComponent.hotInstance.undo()

实例的hotInstance中直接有撤销方法undo()

接下来的复制和粘贴按钮怎么实现对应操作呢？

const plugin = this.$refs.hotTableComponent.hotInstance.getPlugin('contextMenu')

 plugin.executeCommand('copy')

像撤销那些直接写是不起作用的，因为我们点击了单元格进行复制选中后，我们点击复制按钮时，选中的单元格又失去焦点取消选中了，它已经不知道复制的是谁了，粘贴同理

好，这个时候朋友给的一个参数配置救了命了

outsideClickDeselects: false,

写上这个，点击外部 复制粘贴按钮时，里面的单元格还会是选中的状态，问题就解决了

对用户体验好的话其实是用快捷键而不是外面写一堆按钮

直接在配置里写undo: true,的话，我们就可以用键盘常用的快捷键command+z撤销了

4、如何自发让目前选中的单元格变成编辑状态呢？

this.$refs.hotTableComponent.hotInstance.getActiveEditor().beginEditing()

自己看文档也没看太仔细，搜索相关问题找到的网页也很少。最后也是在两个朋友的帮助下才解决了遇到的问题，记下来，如果你也遇到了同样的问题，希望能帮助你