????最近項目中有使用到這個插件扰才，于是重點了解了一下同波，在github上有9k+的星星鳄梅，雖然是收費產(chǎn)品，但是別急未檩，小編有辦法去掉水印呀戴尸！一起來看看吧！
????首先列出它的官方文檔 Handsontable冤狡，學(xué)習(xí)一個東西一定要看它的API文檔哦孙蒙！
????其次，它的兼容性悲雳，不管你的是Vue項目挎峦，React項目、Angle...（不會拼怜奖。浑测。。）項目歪玲、還是H5迁央，它都是兼容的！這個不要太感動了滥崩，一起來操作一下吧岖圈！
? ? 如果是H5項目，查看這個H5項目钙皮，別人寫的很詳細蜂科，效果如下圖。
????我主要做了react項目下實現(xiàn)效果短条，在npm安裝后??npm install handsontable @handsontable/react? 在項目中引入css和組件直接使用
關(guān)鍵的配置如下：
????????????width: '100%', //表格的寬度
? ? ? ? ? ? height: 470, //表格的高度 設(shè)置了才會出現(xiàn)scroll
? ? ? ? ? ? className: "htCenter htMiddle", //垂直水平居中
? ? ? ? ? ? colWidths: 55, //每列的寬度
? ? ? ? ? ? rowHeights: 35, //每行的高度
? ? ? ? ? ? //fixedRowsTop: 2, ????//固定兩行excel的凍結(jié)
? ? ? ? ? ? //fixedColumnsLeft: 3, //固定兩列? 固定行列會影響表格排版
? ? ? ? ? ? mergeCells: true, //表示允許單元格合并
? ? ? ? ? ? manualColumnMove: false, //列可拖動
? ? ? ? ? ? manualRowMove: false, //行可拖動
? ? ? ? ? ? manualColumnResize: true, //列可拖拽 調(diào)大小
? ? ? ? ? ? manualRowResize: true, //行可拖拽 調(diào)大小
? ? ? ? ? ? autoColumnSize: false, //當(dāng)值為true且列寬未設(shè)置時导匣，自適應(yīng)列大小
? ? ? ? ? ? columnSorting: false, // 排序
? ? ? ? ? ? contextMenu: true, //右鍵菜單
? ? ? ? ? ? copyable: true, // 允許鍵盤復(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';
????????????????// 此處可以單獨渲染某行或某列 根據(jù)條件渲染 比如背景色 字體贡定、顏色、粗細等等
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
????????????dropdownMenu: true,//頭部是否顯示menu
? ? ? ? ? ? contextMenu: {? ? //內(nèi)容部分的menu 對功能漢化
? ? ? ? ? ? ? ? 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ù)改變時觸發(fā)此方法 捕捉數(shù)據(jù)更改
? ? ? ? ? ? ? ? console.log(this.getData(), '/', changes, '/', source);
? ? ? ? ? ? },
????由于項目原因可都，不好意思缓待，效果圖不能展示，抱歉抱歉渠牲！需要注意的是此插件的數(shù)據(jù)格式有兩種旋炒，一種是數(shù)組類型的，如果數(shù)據(jù)復(fù)雜签杈，合并單元格較多瘫镇，建議使用這種數(shù)據(jù)格式。還有一種是對象類型的答姥，多用于數(shù)據(jù)簡單的铣除，操作起來更方便。
????最后再來說說這個插件都有哪些bug吧踢涌，
????1通孽、在冷凍行或列后，合并的單元格會遭到破壞
????2睁壁、冷凍行或列后背苦，查看下面的數(shù)據(jù)會有延遲（情況出現(xiàn)少），若右側(cè)超出頁面大小向下滑動潘明，會出現(xiàn)有的滑有的不滑行剂，即錯位，體驗不好
????3钳降、導(dǎo)出表格盡量后端做導(dǎo)出厚宰，前端導(dǎo)出會出現(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; 我也不知道我為什么要寫兩個盐杂，可能是嘗試的時候一個沒有生效這個大家自己下去嘗試吧逗载。今天就說這么多啦，不懂的可以留言我告訴你也可以私信我（不經(jīng)沉戳遥看）厉斟，有用的話給個小心心吧！
