handsontable基础使用

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

在Vue中使用Handsontable

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

//第一种方式
<hot-table :settings="secondColumnSettings" :data="hotData"></hot-table>


//第二种方式
<hot-table :data="hotData" :settings="secondColumnSettings">
  <hot-column title="First column header">
  </hot-column>
  <hot-column title="seconed">
  </hot-column>
</hot-table>

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

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

readOnly只读属性

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

• 整个表格只读：在settings对象设置readOnly属性为true即可
• 指定列只读。这种对于不固定列数情况设置不太友好

columns: [{
    readOnly: true
}]

• 指定行或者单元格只读

cells: function (row, col, prop) {
    var cellSet = {};
    // 指定第一行只读
    if (row == 0) {
        cellSet.readOnly = true;
    } else if (row == 1 && col == 1) {
        //指定单元格只读
        cellSet.readOnly = true;
    }
    return cellSet;
},

beforeChange

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

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

Handsontable.hooks.add("beforeChange",function (result, source) {
    //可以在该方法校验输入数据的格式
    
})

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

Handsontable.hooks.add("beforeChange",function (result, source) {
    let len = result.length;
    for (let i = 0; i < len; i++) {
        //1.指定项置为Null，或使用changes.splice（i，1）将其从数组中移除。
        result[i] = null;
        //2.更改指定项数值
        result[i][3] = '指定数值';
        //3.将result长度置为0
        result.length = 0;
        //4.return false
        return false;
    }
    
})

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

afterChange

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

Handsontable.hooks.add("afterChange",function (result, source) {
    //可以获取到更改后的数据
})

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