vue grid layout添加删除事件

Vue Grid Layout是一个可拖拽和可调整大小的网格布局组件，它可以帮助我们实现灵活可变的网格布局。在Vue Grid Layout中，我们可以很方便地添加和删除网格项，并且可以通过监听相关事件来进行相应的处理。

要添加一个网格项，我们可以使用Vue Grid Layout提供的`addItem`方法。该方法接受一个包含网格项的配置对象作为参数，配置对象中包括网格项的id、x和y轴的坐标、宽度和高度等信息。我们可以在需要添加网格项的地方调用`addItem`方法来动态添加网格项。

例如，我们可以在点击一个按钮的事件处理函数中调用`addItem`方法，将一个新的网格项添加到网格布局中。具体的代码可以如下所示：

methods: {
  handleAddItem() {
    const newItem = {
      id: 'new-item',
      x: 0,
      y: 0,
      w: 2,
      h: 2
    };
    this.$refs.gridLayoutRef.addItem(newItem);
  }
}

要删除一个网格项，我们可以使用Vue Grid Layout提供的`removeItem`方法。该方法接受一个网格项的id作为参数，我们可以通过id来指定要删除的网格项。同样地，在需要删除网格项的地方调用`removeItem`方法即可完成删除。

例如，我们可以在点击某个网格项的删除按钮的事件处理函数中调用`removeItem`方法，将该网格项从网格布局中移除。具体的代码可以如下所示：

methods: {
  handleRemoveItem(itemId) {
    this.$refs.gridLayoutRef.removeItem(itemId);
  }
}

通过这样的方式，我们可以很方便地添加和删除Vue Grid Layout中的网格项，实现动态的网格布局操作。