????最近項(xiàng)目中有使用到這個(gè)插件，于是重點(diǎn)了解了一下，在github上有9k+的星星，雖然是收費(fèi)產(chǎn)品，但是別急，小編有辦法去掉水印呀！一起來(lái)看看吧！
????首先列出它的官方文檔 Handsontable，學(xué)習(xí)一個(gè)東西一定要看它的API文檔哦！
????其次，它的兼容性，不管你的是Vue項(xiàng)目，React項(xiàng)目、Angle...（不會(huì)拼。。。）項(xiàng)目、還是H5，它都是兼容的！這個(gè)不要太感動(dòng)了，一起來(lái)操作一下吧！
? ? 如果是H5項(xiàng)目，查看這個(gè)H5項(xiàng)目，別人寫(xiě)的很詳細(xì)，效果如下圖。
????我主要做了react項(xiàng)目下實(shí)現(xiàn)效果，在npm安裝后??npm install handsontable @handsontable/react? 在項(xiàng)目中引入css和組件直接使用
關(guān)鍵的配置如下：
????????????width: '100%', //表格的寬度
? ? ? ? ? ? height: 470, //表格的高度 設(shè)置了才會(huì)出現(xiàn)scroll
? ? ? ? ? ? className: "htCenter htMiddle", //垂直水平居中
? ? ? ? ? ? colWidths: 55, //每列的寬度
? ? ? ? ? ? rowHeights: 35, //每行的高度
? ? ? ? ? ? //fixedRowsTop: 2, ????//固定兩行excel的凍結(jié)
? ? ? ? ? ? //fixedColumnsLeft: 3, //固定兩列? 固定行列會(huì)影響表格排版
? ? ? ? ? ? mergeCells: true, //表示允許單元格合并
? ? ? ? ? ? manualColumnMove: false, //列可拖動(dòng)
? ? ? ? ? ? manualRowMove: false, //行可拖動(dòng)
? ? ? ? ? ? manualColumnResize: true, //列可拖拽 調(diào)大小
? ? ? ? ? ? manualRowResize: true, //行可拖拽 調(diào)大小
? ? ? ? ? ? autoColumnSize: false, //當(dāng)值為true且列寬未設(shè)置時(shí)，自適應(yīng)列大小
? ? ? ? ? ? columnSorting: false, // 排序
? ? ? ? ? ? contextMenu: true, //右鍵菜單
? ? ? ? ? ? copyable: true, // 允許鍵盤(pán)復(fù)制
? ? ? ? ? ? renderer: function(instance, td, row, col, prop, value, cellProperties) {
? ? ? ? ? ? ? ? // 渲染為text類型，可選的有TimeRenderer、PasswordRenderer等不同的類型
? ? ? ? ? ? ? ? Handsontable.renderers.TextRenderer.apply(this, arguments);
? ? ? ? ? ? ? ? // 判斷條件
? ? ? ? ? ? ? ? if (row === 0 || row === 1 || row === 2) {
? ? ? ? ? ? ? ? ? ? td.style.backgroundColor = '#e0ecff';
????????????????// 此處可以單獨(dú)渲染某行或某列 根據(jù)條件渲染 比如背景色 字體、顏色、粗細(xì)等等
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
????????????dropdownMenu: true,//頭部是否顯示menu
? ? ? ? ? ? contextMenu: {? ? //內(nèi)容部分的menu 對(duì)功能漢化
? ? ? ? ? ? ? ? items: {
? ? ? ? ? ? ? ? ? ? 'row_above': {
? ? ? ? ? ? ? ? ? ? ? ? name: '上方插入一行'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? 'row_below': {
? ? ? ? ? ? ? ? ? ? ? ? name: '下方插入一行'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? "col_left": {
? ? ? ? ? ? ? ? ? ? ? ? name: '左方插入列'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? "col_right": {
? ? ? ? ? ? ? ? ? ? ? ? name: '右方插入列'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? "remove_row": {
? ? ? ? ? ? ? ? ? ? ? ? name: '刪除行',
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? "remove_col": {
? ? ? ? ? ? ? ? ? ? ? ? name: '刪除列',
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? 'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
? ? ? ? ? ? ? ? ? ? 'clear_custom': {
? ? ? ? ? ? ? ? ? ? ? ? name: '清除數(shù)據(jù)',
? ? ? ? ? ? ? ? ? ? ? ? callback: function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.clear();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? afterChange: function(changes, source) { ????//數(shù)據(jù)改變時(shí)觸發(fā)此方法 捕捉數(shù)據(jù)更改
? ? ? ? ? ? ? ? console.log(this.getData(), '/', changes, '/', source);
? ? ? ? ? ? },
????由于項(xiàng)目原因，不好意思，效果圖不能展示，抱歉抱歉！需要注意的是此插件的數(shù)據(jù)格式有兩種，一種是數(shù)組類型的，如果數(shù)據(jù)復(fù)雜，合并單元格較多，建議使用這種數(shù)據(jù)格式。還有一種是對(duì)象類型的，多用于數(shù)據(jù)簡(jiǎn)單的，操作起來(lái)更方便。
????最后再來(lái)說(shuō)說(shuō)這個(gè)插件都有哪些bug吧，
????1、在冷凍行或列后，合并的單元格會(huì)遭到破壞
????2、冷凍行或列后，查看下面的數(shù)據(jù)會(huì)有延遲（情況出現(xiàn)少），若右側(cè)超出頁(yè)面大小向下滑動(dòng)，會(huì)出現(xiàn)有的滑有的不滑，即錯(cuò)位，體驗(yàn)不好
????3、導(dǎo)出表格盡量后端做導(dǎo)出，前端導(dǎo)出會(huì)出現(xiàn)亂碼的情況。
最后，解決一下下面水印的情況，在你安裝完依賴后，node_models/handsontable/disthandsontable.full.css文件里面修改css 大概267行吧。。。
#hot-display-license-info {
? ? display: none !important;
? ? visibility: hidden;
? ? font-size: 10px;
? ? color: #323232;
? ? padding: 5px 0 3px 0;
? ? font-family: Helvetica, Arial, sans-serif;
? ? text-align: left;
}
#hot-display-license-info a {
? ? font-size: 10px;
? ? visibility: hidden;
? ? display: none;
}
????加上display：none； visibility:hidden; 我也不知道我為什么要寫(xiě)兩個(gè)，可能是嘗試的時(shí)候一個(gè)沒(méi)有生效這個(gè)大家自己下去嘗試吧。今天就說(shuō)這么多啦，不懂的可以留言我告訴你也可以私信我（不經(jīng)?？矗?，有用的話給個(gè)小心心吧！
