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()
我們設(shè)置hotSettings
contextMenu是配置的有擊出現(xiàn)的菜單
1、如何指定某行某列不現(xiàn)實(shí)某個(gè)菜單
利用disabled里的回調(diào)函數(shù)實(shí)現(xiàn)如上圖
2、右側(cè)菜單里默認(rèn)有復(fù)制、剪切功能，但是沒有粘貼，粘貼需要調(diào)用copyPaste插件實(shí)現(xiàn)
上圖中的this就是handsontable實(shí)例
plugin.paste(clipboardCache)中clipboardCache是復(fù)制的時(shí)候我們暫存起來的復(fù)制的單元格，在全局設(shè)置的clipboardCache變量
上圖中的就是復(fù)制方法，參數(shù)changes就是復(fù)制的單元格，這里用了SheetClip插件轉(zhuǎn)化數(shù)據(jù)，因?yàn)槲覀兛梢詮?fù)制多行多列，changes是個(gè)二維數(shù)組，SheetClip可以把二維數(shù)組變成字符串
粘貼方法調(diào)用plugin.paste(clipboardCache)需要傳入的clipboardCache需要是字符串
此時(shí)，右側(cè)菜單的粘貼就實(shí)現(xiàn)了
3、如何點(diǎn)擊撤銷、復(fù)制、粘貼按鈕主動(dòng)調(diào)用handsontable插件功能
比如點(diǎn)擊撤銷如果撤銷我們對單元格的操作呢？
1、直接調(diào)用右側(cè)菜單中的撤銷
2、調(diào)用表格實(shí)例方法中的撤銷方法
const plugin = this.$refs.hotTableComponent.hotInstance.getPlugin('contextMenu')
?plugin.executeCommand('undo')
這樣做就是相當(dāng)于調(diào)用了右側(cè)菜單中的undo,前提是我們右側(cè)菜單配置了undo撤銷哦
第二個(gè)方法是直接this.$refs.hotTableComponent.hotInstance.undo()
實(shí)例的hotInstance中直接有撤銷方法undo()
接下來的復(fù)制和粘貼按鈕怎么實(shí)現(xiàn)對應(yīng)操作呢？
const plugin = this.$refs.hotTableComponent.hotInstance.getPlugin('contextMenu')
?plugin.executeCommand('copy')
像撤銷那些直接寫是不起作用的，因?yàn)槲覀凕c(diǎn)擊了單元格進(jìn)行復(fù)制選中后，我們點(diǎn)擊復(fù)制按鈕時(shí)，選中的單元格又失去焦點(diǎn)取消選中了，它已經(jīng)不知道復(fù)制的是誰了，粘貼同理
好，這個(gè)時(shí)候朋友給的一個(gè)參數(shù)配置救了命了
outsideClickDeselects: false,
寫上這個(gè)，點(diǎn)擊外部 復(fù)制粘貼按鈕時(shí)，里面的單元格還會(huì)是選中的狀態(tài)，問題就解決了
對用戶體驗(yàn)好的話其實(shí)是用快捷鍵而不是外面寫一堆按鈕
直接在配置里寫undo: true,的話，我們就可以用鍵盤常用的快捷鍵command+z撤銷了
4、如何自發(fā)讓目前選中的單元格變成編輯狀態(tài)呢？
this.$refs.hotTableComponent.hotInstance.getActiveEditor().beginEditing()
5、handsontable綁定的data的二維數(shù)組變了，但是vue視圖沒有更新，試了很多方法都不起作用
解決：this.$refs.hotTableComponent.hotInstance.updateSettings({
? ? ? ? ? data: obj
? ? ? ? })
用上面那個(gè)方法就行了
6、所有的都配置好以后，右擊菜單就是無法出現(xiàn)（有時(shí)候出現(xiàn)有時(shí)候不出現(xiàn)）。經(jīng)過調(diào)試發(fā)現(xiàn)其實(shí)菜單出現(xiàn)了，只是被element ui 的彈層遮住了，handsontable插件出現(xiàn)在彈層的彈層上，隨著彈層不斷的點(diǎn)擊，彈層的z-index會(huì)不斷的累積增加，所以handsontable的右側(cè)菜單剛開始能出現(xiàn)，但是不斷的點(diǎn)擊幾次彈層，handsontable的右側(cè)菜單的z-index就會(huì)被彈層的z-index覆蓋，導(dǎo)致無法出現(xiàn)
自己看文檔也沒看太仔細(xì)，搜索相關(guān)問題找到的網(wǎng)頁也很少。最后也是在兩個(gè)朋友的幫助下才解決了遇到的問題，記下來，如果你也遇到了同樣的問題，希望能幫助你
