Handsontable：更改下拉菜单宽度

Posted 2023-03-22

【中文标题】Handsontable：更改下拉菜单宽度

【英文标题】：Handsontable: change dropdownmenu width

【发布时间】：2020-01-04 19:12:32

【问题描述】：

我花了一些时间寻找可能的解决方案来解决这个问题，this one 似乎是最合适的。

我的自定义视觉对象（PowerBI、Typescript）中的代码结构如下：

export class Visual implements IVisual 
  private settings: VisualSettings;
  private host: IVisualHost;
  <...>
  private hot: Handsontable;

  constructor(options: VisualConstructorOptions) 
    <...>
    ;
    this.hot = new Handsontable(hotElement, hotSettings);

    this.hot.addHook('modifyColWidth', function(width)
      if(this === this.hot.getPlugin('dropdownmenu').menu.hotMenu)
      
        return 300;
      
      return width;
    )
  

最后一段代码输出错误：

Uncaught TypeError: Cannot read property 'getPlugin' of undefined
    at Core.<anonymous> (<anonymous>:65781:29)
    at Hooks.run (<anonymous>:10485:46)
    at Core.runHooks (<anonymous>:43381:89)
    at Core.getColWidth (<anonymous>:42643:22)
    at Table.getColumnWidth (<anonymous>:49386:17)
    at Table.getStretchedColumnWidth (<anonymous>:49396:30)
    at LeftOverlay.sumCellSizes (<anonymous>:83603:33)
    at Overlays.adjustElementsSize (<anonymous>:53065:69)
    at Object.adjustRowsAndCols (<anonymous>:40249:37)
    at Core.updateSettings (<anonymous>:41558:10)0

似乎一个钩子没有看到我的视觉实例，这就是 IntelliSense 不为插件提供任何东西的原因：this.hot.getPlugin('dropdownmenu').menu.hotMenu

有人遇到过同样的问题吗？你能帮忙吗？

【参考方案1】：

您需要添加全局挂钩而不是本地挂钩，并检查将应用挂钩的绑定实例是否是您定义的“热”下拉菜单的一部分。

const self = this;
Handsontable.hooks.add('modifyColWidth', function (width) 
  if (this === (self.hot.getPlugin('dropdownMenu').menu as Menu).hotMenu) 
    return 300;
  
  return width;
);

【讨论】：

好了，越来越近了，现在报错是这样的： Uncaught TypeError: Cannot read property 'menu' of undefined 可能和插件的名字有关系，让我看看...

是的，如果相信提供的小提琴示例 - 插件名称应该是“dropdownMenu”，它区分大小写。

所以，我已经将“dropdownmenu”更正为“dropdownMenu”，这个错误就消失了。下一个错误：“ReferenceError：在新视觉（：65779：5）的eval（视觉上的评估（：65779：5），：1：1）处未定义宽度<....> (function(width: any) 并没有真正的帮助

我也尝试遵循选项#2 - 在这个选项中，this.hot.getPlugin('dropdownMenu').menu 没有看到 hotMenu，尽管这个属性存在于这样的菜单界面中: 界面菜单 hotMenu: _Handsontable.Core

条件plugin.menu && plugin.menu.hotMenu 成功通过，但第三个条件的输出是：This condition will always return 'false' since the types 'this' and 'Core' have no overlap.ts(2367)