HandsOnTable (Vue Wrapper) - 将行与数据库 ID 关联？答案

【问题标题】：HandsOnTable (Vue Wrapper) - Associate row with database id?HandsOnTable (Vue Wrapper) - 将行与数据库 ID 关联？
【发布时间】：2020-10-18 15:22:53
【问题描述】：

我正在通过 Vue 包装器试用 HandsOnTable 来制作一个简单的数据库编辑器。我可以轻松地填充表格，但是我现在需要将更改保存回数据库。

如果我使用 afterChange() 方法，hot 会给我单元格中已更改的更改，但是我需要能够将这些更改与数据库 id 相关联以将它们发送回服务器。关于如何做到这一点的任何想法，以及是否有可能获得与行相关的更改？是否也可以在不向表中的用户显示数据库 ID 的情况下执行此操作？

【问题讨论】：

标签： vue.js handsontable

【解决方案1】：

要回答您的主要问题，您可以将元数据与单元格相关联。因此，您可以将您的技术 ID 例如放在第一列或隐藏列（或任何您想要的位置）。

hot.setCellMeta(0, 0, 'myIdName', 'myIdValue');

其中“热”是您的 Handsontable 实例。 (documentation reference)

然后您可以访问getCellMeta(0, 0)。

第二个问题：

还有可能获取与行相关的更改吗？

您已经可以通过过滤afterChange 挂钩中的更改来获取特定行的更改。获取the example from Handsontable 文档，这就是您获得该行的方式：

new Handsontable(element, {
  afterChange: (changes) => {
    changes.forEach(([row, prop, oldValue, newValue]) => {
      // Some logic...
    });
  }
})

如您所见，changes 是一个包含 row 和 col (prop) 的更改数组。

希望这会有所帮助。

【讨论】：