大概支持以下功能：新增数据、删除数据，表单的拖拽，并在拖拽同时修改对应数据list的顺序，demo如下：

拖拽功能使用了 Vue.Draggable ，控件使用 ElementUI 的Form表单。

实现其实是比较容易的：

<template>
  <el-form :model="domains">
    <el-form-item><el-button type="primary" size="small" @click="addDomain">新 增</el-button></el-form-item>
    <draggable v-model="domains">
      <el-form-item v-for="(item,index) in domains" :key="index">
        <i class="el-icon-rank"/>
        <el-input style="width: 200px" v-model="item.key"></el-input>
        <el-input style="width: 200px" v-model="item.value"></el-input>
        <el-button type="text" @click="deleteDomain(index)"><i class="el-icon-delete"></i> </el-button>
      </el-form-item>
    </draggable>
  </el-form>
</template>
<script>
  import draggable from "vuedraggable";
  export default {
    components:{
      draggable
    data () {
      return {
        domains: [{
          key: 'key1',
          value: 'value1',
          key: 'key2',
          value: 'value2',
    methods: {
      addDomain(){
        this.domains.push({key:'newKey',value:'newValue'})
      deleteDomain(index){
        this.domains.splice(index,1)
</script>
<style scoped>
</style>
将需要拖拽的元素，以v-for的形式放在标签内部，然后单独写新增和删除的方法即可。
                    大概支持以下功能：新增数据、删除数据，表单的拖拽，并在拖拽同时修改对应数据list的顺序，demo如下：拖拽功能使用了Vue.Draggable，控件使用ElementUI的Form表单。实现其实是比较容易的：&lt;template&gt;  &lt;el-form :model="domains"&gt;    &lt;el-form-item&gt;&lt;el-button t...
				
思路借鉴了一位大佬的文章，原文地址如下:
版权声明：本文为qq_42203909原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：antd实现动态增减表单项，支持赋初始值！
首先是封装子组件，自己起个名字。
v-decorator官网上是这么说的：经过 v-decorator 包装的控件，表单控件会自动添加 value ，数据同步将被 Form 接管，我自己的理解v-decorator相当于v-model绑的值，只是操作值的方法不一样，v-model可以直接赋值
				
上篇博客介绍了如何动态实现table的新增表格，其实对于表格和表单的动态添加在日常场景中用到的还蛮多的，两者的实现都有着诸多相似之处，本篇博客小编带领大家揭开实现动态增加form表单的神秘面纱。
图示最终效果：
当点击新增购房人基本信息时，动态新增表单，并且可以根据索引通过点击删除来删除当前表单。
和动态新增table表格一样，新增数据要以对象的形式push到数组里面去，删除还是依赖与splice函数。
具体代码实现：
<el-form ref="basicInformation" :model="b