使用vue-handsontable遇到的坑以及解決辦法
在百度上搜了很多關於這個外掛的使用方法，有一個寫的很詳細的！本來已經很詳細了，我再添點自己的內容。（ps:英語不好，面向百度程式設計_(:з」∠)_）：
1.安裝好之後就直接報錯2個：
第一個是es-2015沒有模組，所以需要在我們的根目錄檔案npm install babel-preset-es2015 --save-dev 如果是用腳手架搭的架子，webpack的配置檔案不需要再次更改。
第二個是vue-handsontable-official中的HotTable.vue找不到handsontable/dist/handsontable.full.css
這是因為它本身引用的路徑有問題，只需要改成@import
解決這2個問題，程式跑起來就沒有問題了。
2.ctrl+z的bug
因為外掛本身有一個ctrl+z 撤銷有bug的問題，解決的辦法是加一列，這樣能撤銷當前單元格的事件，但是不能撤銷一次行為！
3.當需要提交資料給後臺的時候，需要注意幾點：
A.獲取表格資料的時候，使用 getSourceData（）這個函式，而不是getData（）；當然，用這個函式的好處是傳輸資料的時候，能取到自己設定的Key的欄位，而不是 “ 0:excelDetectDate”這種key值為數字的值。
設定屬性值為這個key值欄位，需要在columns中新增一個data屬性。
columns: [
//新增每一列的資料型別和一些配置
{ data: "subordindateUnit" },
]B.在data()中監聽afterChange（）。能獲取實時改變的表單值。在方法中拿到值。（不會怎麼解釋，直接上圖_(:з」∠)_）
下面的afterChange方法，詳情見handsontable的文件。
4.一切資料準備OK，這個時候，突然發現。如果表頭資料太多，頁面就特別寬，滾動條會帶著整個頁面滑動，就像這樣，
這個時候，我是懵逼的。寬度怎麼設定都不起作用。（為此，我還跑到git上提交了issue = =，最後還是自己搞定了）。其實這不算是這個外掛的問題，但是我為此也糾結了很久。所以記錄一下，這種超出的部分要overflow：auto，只需要給這個盒子本身，再套一個盒子。
第一層overflow：hidden；第二層overflow：auto。
就可以在當前頁面滑動了，對了，一定要給第一層盒子定高度！不然表格根本不會出來。（定高雖然醜了點，但是總比整個頁面滑動好看多了。(#^.^#)）
最後附上我的demo的全部程式碼，不包括上傳資料的版本（上傳資料的版本是公司程式碼，就不發了，不懂的可以問我）
<template>
<section>
<div class="overf">
<div id="example-container" class="wrapper">
<HotTable :root='test' ref='textHot' :settings="hotSettings"></HotTable>
</div>
</div>
<div>
<button @click='submit'>提交</button>
<button disabled="disabled" >重置</button>
</div>
</section>
</template>
<script>
import HotTable from "vue-handsontable-official";
import 'handsontable/languages/zh-CN';
import Vue from "vue";
export default {
data: function() {
return {
test: "test-hot",
hotSettings: {
data:[], // 資料在這個裡面,由資料填充表
startRows: 10, //初始行列數
startCols: 35,
minRows: 1, //最小行列
minCols: 1,
rowHeaders: true, //行表頭
colHeaders: [
"所屬機構",
"檢測時間",
"工號",
"姓名",
"手機號",
"性別",
"出生日期"
], //自定義列表頭or 布林值
minSpareCols: 1, //列留白
// minSpareRows: 2, //行留白
className: "htCenter",
currentRowClassName: "currentRow", //為選中行新增類名，可以更改樣式
currentColClassName: "currentCol", //為選中列新增類名
autoWrapRow: true, //自動換行
language:'zh-CN',
contextMenu: [
"row_above",
"row_below",
"col_left",
"col_right",
"---------",
"remove_row",
"remove_col",
"---------",
"alignment",
'make_read_only',
"borders",
"copy",
"cut"
],
//右鍵效果
fillHandle: true, //選中拖拽複製 possible values: true, false, "horizontal", "vertical"
fixedColumnsLeft: 0, //固定左邊列數
fixedRowsTop: 1, //固定上邊行數
columns: [
//新增每一列的資料型別和一些配置
{data: 'subordindateUnit'}, // data後面跟的這個欄位是上傳對應的欄位
{
data: "excelDetectTime",
type: "time",
timeFormat: "h:mm:ss a",
correctFormat: true
},
{data: 'jobNumber'},
{data: 'name'},
{
data: 'phone',
type: "numeric"
}, //數值
{
data: 'excelGender',
type: "dropdown",
source: ["男", "女"],
strict: false
},
{
data: 'excelBirthday',
type: "date", //時間格式
dateFormat: "YYYY-MM-DD",
correctFormat: true,
defaultDate: "1960-01-01"
},
],
afterChange: function (changes, source) {
this.updatePlayerList = this.getSourceData()
if(changes){
changes.forEach(([row,prop,oldValue,newValue]) => {
// 正則判斷
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
if(prop == 'phone'){ //phone是我需要判斷的欄位
if( phoneReg.test(newValue)){
console.log(true);
} else{
console.log(false);
}
}
})
}
},
updatePlayerList: null
}
};
},
name: "SampleApp",
components: {
HotTable
},
methods:{
getSourceData: function () {
return this.$refs.textHot.table.getSourceData()
},
submit: function () {
console.log(this.getSourceData());
}
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
section{
width: 100%;
height: 100%;
overflow: hidden;
}
.overf{
width: 50%;
height: 100px;
/* height: 100%; */
overflow: hidden;
}
#example-container{
overflow: auto;
width: 100%;
height: 100%;
}
h3{
width: 100%;
background-color: burlywood;
}
button {
margin: 20px 20px;
}
.handsontable .currentRow {
background-color: #b6bada;
}
.handsontable .currentCol {
background-color: #d1dfd7;
}
</style>
11.21日更新：
最近需求改了，需要自己加入正則判斷某個資料，四處提問，終於寫出來了。這裡用到之前說的afterChange事件。
afterChange: function (changes, source) {
this.updatePlayerList = this.getSourceData()
if(changes){
changes.forEach(([row,prop,oldValue,newValue]) => {
// 正則判斷
let phoneReg = /^1(3|4|5|7|8)\d{9}$/
if(prop == 'phone'){ //phone是我需要判斷的欄位
if( phoneReg.test(newValue)){
console.log(true);
} else{
console.log(false);
}
}
})
}
},最後希望能提供給大家一點幫助！