脚本宝典收集整理的这篇文章主要介绍了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>
以上是脚本宝典为你收集整理的Vue component+vuedraggable拖拽动态表单全部内容,希望文章能够帮你解决Vue component+vuedraggable拖拽动态表单所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。