如何用Vue实现一个可视化拖放功能的自定义表单组件？

本文共计718个文字，预计阅读时间需要3分钟。

实现如下示例子所表示的可视化可拖拽表格功能。整个页面分为左中右三列布局，左侧为组件库的部件（组件）作为key，拖拽到中间区域时，向Vuex存储的数据数组中push数据，拖拽一个就push一个。点击某个×时，从Vuex存储的数据数组中删除该数据。

实现如例子所示的可视化可拖放表单功能。整个页面，分为左中右三栏布局，左栏的部件库的部件（组件）作为key,拖放到中间区域时，往vuex存放数组数据，拖一个就push一个。点击某个组件时，在右栏显示其属性，其实也就是在vuex存放的数据中查找数据迭代属性。

左中右三栏 左右固定 中间自适应布局

首先，布局上来看，左右都是可以拉伸的，中间是自适应的布局。

左右分别float left和float right, 中间栏使用margin撑开布局，即可完成布局

动态缩放浏览器窗口来查看效果

动态显示template

第二个重要点就是让template可编程,

例如： 传来一个字符串<el-button>按钮</el-button>,如何显示成为组件而不是字符串标签呢。