使用vuehandsontable遇到的坑以及解决办法

在百度上搜了很多关于这个插件的使用方法&＃xff0c;有一个写的很详细的&＃xff01;本来已经很详细了&＃xff0c;我再添点自己的内容。&＃xff08;ps:英语不好&＃xff0c;面向百度编程_(:з」∠)_&＃xff09;&＃xff1a;

1.安装好之后就直接报错2个&＃xff1a;

第一个是es-2015没有模块&＃xff0c;所以需要在我们的根目录文件npm install babel-preset-es2015 --save-dev 如果是用脚手架搭的架子&＃xff0c;webpack的配置文件不需要再次更改。

第二个是vue-handsontable-official中的HotTable.vue找不到handsontable/dist/handsontable.full.css

这是因为它本身引用的路径有问题&＃xff0c;只需要改成 &＃64;import "../../handsontable/dist/handsontable.full.css";

解决这2个问题&＃xff0c;程序跑起来就没有问题了。

2.ctrl&＃43;z的bug

因为插件本身有一个ctrl&＃43;z 撤销有bug的问题&＃xff0c;解决的办法是加一列&＃xff0c;这样能撤销当前单元格的事件&＃xff0c;但是不能撤销一次行为&＃xff01;

3.当需要提交数据给后台的时候&＃xff0c;需要注意几点&＃xff1a;

A.获取表格数据的时候&＃xff0c;使用 getSourceData&＃xff08;&＃xff09;这个函数&＃xff0c;而不是getData&＃xff08;&＃xff09;&＃xff1b;当然&＃xff0c;用这个函数的好处是传输数据的时候&＃xff0c;能取到自己设置的Key的字段&＃xff0c;而不是 “ 0:excelDetectDate”这种key值为数字的值。

设置属性值为这个key值字段&＃xff0c;需要在columns中添加一个data属性。

columns: [//添加每一列的数据类型和一些配置{ data: "subordindateUnit" },
]

B.在data()中监听afterChange&＃xff08;&＃xff09;。能获取实时改变的表单值。在方法中拿到值。&＃xff08;不会怎么解释&＃xff0c;直接上图_(:з」∠)_&＃xff09;

下面的afterChange方法&＃xff0c;详情见handsontable的文档。

4.一切数据准备OK&＃xff0c;这个时候&＃xff0c;突然发现。如果表头数据太多&＃xff0c;页面就特别宽&＃xff0c;滚动条会带着整个页面滑动&＃xff0c;就像这样&＃xff0c;

这个时候&＃xff0c;我是懵逼的。宽度怎么设置都不起作用。&＃xff08;为此&＃xff0c;我还跑到git上提交了issue &＃61; &＃61;&＃xff0c;最后还是自己搞定了&＃xff09;。其实这不算是这个插件的问题&＃xff0c;但是我为此也纠结了很久。所以记录一下&＃xff0c;这种超出的部分要overflow&＃xff1a;auto&＃xff0c;只需要给这个盒子本身&＃xff0c;再套一个盒子。

第一层overflow&＃xff1a;hidden&＃xff1b;第二层overflow&＃xff1a;auto。

就可以在当前页面滑动了&＃xff0c;对了&＃xff0c;一定要给第一层盒子定高度&＃xff01;不然表格根本不会出来。&＃xff08;定高虽然丑了点&＃xff0c;但是总比整个页面滑动好看多了。(#^.^#)&＃xff09;

最后附上我的demo的全部代码&＃xff0c;不包括上传数据的版本&＃xff08;上传数据的版本是公司代码&＃xff0c;就不发了&＃xff0c;不懂的可以问我&＃xff09;

11.21日更新&＃xff1a;

最近需求改了&＃xff0c;需要自己加入正则判断某个数据&＃xff0c;四处提问&＃xff0c;终于写出来了。这里用到之前说的afterChange事件。

afterChange: function (changes, source) {this.updatePlayerList &＃61; this.getSourceData()if(changes){changes.forEach(([row,prop,oldValue,newValue]) &＃61;> {// 正则判断let phoneReg &＃61; /^1(3|4|5|7|8)\d{9}$/if(prop &＃61;&＃61; &＃39;phone&＃39;){ //phone是我需要判断的字段if( phoneReg.test(newValue)){console.log(true);} else{console.log(false);}}})}},

最后希望能提供给大家一点帮助&＃xff01;