使用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 "../../handsontable/dist/handsontable.full.css";

解决这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的全部代码，不包括上传数据的版本（上传数据的版本是公司代码，就不发了，不懂的可以问我）

---

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);
                }
              }
          })
          }
        },

最后希望能提供给大家一点帮助！