Handsontable是一款比较贴近结构化处理的电子表格,几年前还是0.31.2版本的时候，主要用在了BI表格数据编辑、批量编辑、数据修正、数据补充装填等方面,确实处理结构化的数据很好玩,像是现在的luckysheet等表格效果做的也很好,能够很好的导出表格原有的样式,特别适合去做报表侧的处理,轻度处理后,很容易就能做出一款报表平台,而本次处理主要是针对表字段设置侧的,对结构化的限制有一定的要求，以此做分享。

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

效果

主要是针对数据表建模方面的设置,因为excel的字段方式是比较常见的一种审批或者提交方式,通常会有复制和excel经典的拖行批量复制等操作、粘贴、校验等,尽可能的提供比较适合操作又满足比较多的设置项、 PDmaner用的时间也比较长,伴随着轻量工具的局部调整,帮助我完成了工作中的许多重复性的项目基础模块生成,一直比较诧异的是编辑方式没有类似excel类的交互方式,虽然已经很易操作了,但是近阶段增加的表格式编辑，稍微略显奇怪。

剖剖组件

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

filters=true筛选以及排序设置失效的问题，经过验证，6.2.2/src/plugins中好像移除了filters的处理,7.0版本的是正常的,因此如果基于此项考量,可以自行的配置注册
关于cellType自定义部分的内容,其实主要是下拉选择是内容显示和选择key,value的差异化处理,默认dropdown的source不支持这种转换,好在select组件放置在editers里面,只需要注册一下即可,以下是处理代码,也可以基于此自定义注册许多的类型处理、比较好理解

js 复制代码

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版本,确实比较好用，关于数据改变的检测,很容易就做了处理

js 复制代码

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

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

总结

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

Handsontable应用解剖

效果

剖剖组件

总结