Vue component+vuedraggable拖拽动态表单

 

vuedraggable

component

<template>
  <div>
    {{ form }}
    <el-card class="box-card leftCard">
      <vuedraggable v-model="list2" group="people">
        <div v-for="item in list2" :key="item" class="item">
          <component :is="item" v-model="form[item]" v-bind="attrs">{{ item }}</component>
        </div>
      </vuedraggable>
    </el-card>
    <el-card class="box-card leftCard">
      <vuedraggable v-model="list" group="people">
        <div v-for="item in list" :key="item" class="item"><el-button>{{ item }}</el-button></div>
      </vuedraggable>
    </el-card>

  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'

export default {
  name: 'HelloWorld',
  components: { vuedraggable },
  props: {
  },
  data() {
    return {
      form: {},
      attrs: { 'type': 'success' }, // , disabled: true
      list: ['el-rate', 'el-tag', 'el-button', 'el-switch', 'el-slider', 'el-time-select', 'el-input'],
      list2: []
    }
  },
  methods: {
  }
}
</script>
<style scoped>

.item{
  width: 300px;
  height: 50px;
}

</style>