Handsontable是一款比较靠近结构化处理的电子表格,几年前仍是0.31.2版别的时候，首要用在了BI表格数据修改、批量修改、数据修正、数据弥补装填等方面,的确处理结构化的数据很好玩,像是现在的luckysheet等表格作用做的也很好,能够很好的导出表格原有的样式,特别合适去做报表侧的处理,轻度处理后,很简单就能做出一款报表渠道,而本次处理首要是针对表字段设置侧的,对结构化的限制有一定的要求，以此做共享。

发现身边事儿、聊点周奇遇，我是沈二，期待奇遇的互联网魂灵~、一同聊天吹水，探究新的可能~wx:breathingss，入圈吧！

作用

首要是针对数据表建模方面的设置,因为excel的字段方法是比较常见的一种审批或许提交方法,通常会有复制和excel经典的拖行批量复制等操作、粘贴、校验等,尽可能的供给比较合适操作又满足比较多的设置项、

Handsontable使用解剖
PDmaner用的时刻也比较长,伴随着轻量工具的部分调整,帮助我完成了工作中的许多重复性的项目根底模块生成,一向比较惊讶的是修改方法没有相似excel类的交互方法,尽管已经很易操作了,可是近阶段添加的表格局修改，稍微略显奇怪。
Handsontable使用解剖
Handsontable使用解剖

剖剖组件

Handsontable@7.0之后的版别形似需要开始授权了,因而用的是Handsontable@6.0,这里我不再赘述配置侧的内容，首要是对一些遇到的问题做阐明

  1. filters=true筛选以及排序设置失效的问题，经过验证，6.2.2/src/plugins中好像移除了filters的处理,7.0版别的是正常的,因而如果基于此项考量,能够自行的配置注册
    Handsontable使用解剖
  2. 关于cellType自定义部分的内容,其实首要是下拉挑选是内容显现和挑选key,value的差异化处理,默许dropdown的source不支持这种转换,好在select组件放置在editers里面,只需要注册一下即可,以下是处理代码,也能够基于此自定义注册许多的类型处理、比较好了解
Handsontable.cellTypes.registerCellType("select", {
  editor: Handsontable.editors.SelectEditor,
  renderer: (instance, td, row, col, prop, value, cellProperties) => {
    var selectOptions=cellProperties.selectOptions;
    if(selectOptions){
      Handsontable.dom.empty(td);
    if (typeof selectOptions === 'function') {
      var temp=selectOptions();
      selectOptions = temp;
    }
    value=selectOptions?selectOptions[value]:value;
  }
    Handsontable.cellTypes.text.renderer(
      instance,
      td,
      row,
      col,
      prop,
      value,
      cellProperties
    );
    return td;
  },
  // Handsontable.renderers.TextRenderer,
});

3.关于数据侧保存监控,vue侧的表格修改尽管能够实现,首要处理逻辑有点儿紊乱,且作用不佳,其他的也看了许多,但针对结构侧数据处理的,选了一圈，最终仍是折中挑选了不需要lisence的Handsontable版别,的确比较好用，关于数据改动的检测,很简单就做了处理

   hot.addHook('afterChange', (changes, source)=> {
        // console.log(changes,source);
       const info= hot.getSourceData();
       console.log(info);
      })

4.扩展性和想象空间比较大,比方plugins.registerPlugin配置类的注册也是比较的,供给了比较良好的自定义空间，另外当前选中行的方法形似是我翻开的方法不对,有些问题、

总结

完成了主体部分的内容，开始成型,后续还有比较多的发挥空间,有机会再做进一步的共享。