handsontable基础使用

Posted 2023-03-09

参考技术A Handsontable是一款很接近excel的前端表格插件。本文记录了在vue项目中使用Handsontable插件的一些经验~

在Vue中使用Handsontable有两种方式：

第二种方式使用时，title不能为数字类型的0。

我个人在使用第二种方式时，当数据hotTable变化时，视图会有问题。但第一种方式视图会跟随数据正常改变。

有3种设置不同的只读属性的方式：

beforeChange在更改一个或多个单元格之前触发。该方法返回两个参数。

第一个参数是一个2维数组，外层表示修改的所有单元格数据。内层表示[row(行)，column(列)，oldVal(原始值)，newVal(更改后的值)]这4个公共属性，row和column从0开始。第二个参数是被改变的资源的名称。

若数据格式校验不合格，需要撤销更改。撤销的方法有4种：

上面的4种方式中，第1，3，4种方式都不会触发afterChange方法。

afterChange在更改一个或多个单元格之后触发。该方法返回的两个参数跟beforeChange方法参数含义相同

官网的地址： https://handsontable.com/docs/7.3.0/tutorial-introduction.html