低代码平台-添加button组件这次主要是在之前的布局组件之中，引入对应的其他子组件。现在实现了按钮的添加。同时也遇到了

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

问题

添加vue-grid-layout删除组件的能力。
左侧添加生成button组件的配置文件。
中间展示区button按钮。
右侧配置button。布局组件自适应button的大小。
vue-grid-layout添加对应的组件。

解决问题

添加vue-grid-layout删除组件的能力。
1. 添加组件删除的按钮。添加对应的事件，传递对应的id和索引index，对储存的数组进行删除，更新对应的json数据即可。
```
/**
* 删除布局组件
*/
handleRemoveItem(i,index) {
  console.log(index,'!!!')
  this.layout.splice(index, 1);
  delLayoutConfig(i);
},
```

左侧添加生成button组件的配置文件。

添加左侧基本的描述文件。组件类型：componentButton。组件名称：按钮组件。然后放在data中，进行html模板渲染就可以了。

data() {
    return {
      componentsList: [{
        name: '布局组件',
        type:"layout",
      },{
        name: '按钮组件',
        type:"componentButton",
      }],
    };

中间展示区button按钮。
1. 在拖拽展示按钮的时候。需要先有一个布局组件。这是原则。有了布局组件之后，还必须是选中的其中一个。然后在拖拽对应的按钮组件，拖拽到对应的布局之中。
2. 其中的数据逻辑是，在左侧拖拽的时候，生成了布局组件的json配置信息，然后在中间渲染出布局之后。在拖拽按钮组件之后，生成按钮组件的json数据。同时，根据选中的id，然后找到对应的json文件，更新组件的描述JSON。生成完成的json配置文件，在中间渲染，就可以看到了。

右侧配置button。布局组件自适应button的大小。
1. 这个是现在遇到的问题，因为无法选中对应的按钮组件，所以在右侧也就不能显示对应的配置信息了。这是一个待办，需要解决。
vue-grid-layout添加对应的组件。
1. 在Vue中就是，动态引入组件。

     <component  v-if="item.components.componentId" :is="item.components.render" :componentJson="item.components"></component>

总结

这次主要是在之前的布局组件之中，引入对应的其他子组件。现在实现了按钮的添加。同时也遇到了问题，就是我们无法选中按钮组件，也就无法进行配置了。针对这样的问题，还需要思考。