wans

src/views/test/Test1.vue

@@ -1,7 +1,7 @@
 <template>
   <a-row :gutter="10">
     <a-col :span="5">
-      <a-card title="基础">
+      <a-card title="基础" style="min-height:600px">
         <a-row>
           <VueDraggable
             v-model="componentList"
@@ -38,6 +38,7 @@
               v-model="list2"
               :animation="150"
               group="people"
+              style="min-height:600px"
             >
               <MComponent
                 class="hover"
@@ -88,7 +89,7 @@ export default {
     onClone (element) {
       // 生成随机id
       const val = {
-        ...element,
+        ...JSON.parse(JSON.stringify(element)),
         id: Math.floor(Math.random() * 10000000000000)
       }
       this.handleSelect(val)

src/views/test/modules/Component.vue

@@ -9,8 +9,8 @@
       <a-textarea v-if="detail.type==='textarea'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
       <!-- 下拉框 -->
       <a-select v-if="detail.type==='select'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" >
-        <a-select-option value="lucy">
-          Lucy
+        <a-select-option v-for="item in detail.options" :value="item.value" :key="item.value">
+          {{ item.label }}
         </a-select-option>
       </a-select>
       <!-- 日期时间 -->

src/views/test/modules/Detail.vue

@@ -2,6 +2,7 @@
   <a-card
     :tab-list="tabList"
     size="small"
+    style="min-height:600px"
     :active-tab-key="selectKey"
     @tabChange="onTabChange">
     <a-form
@@ -35,8 +36,28 @@
       </template>
       <!-- 下拉框 -->
       <template v-if="model.type === 'select'">
-        <a-form-item label="">
-          <a-input v-model="model.min" />
+        <a-form-item label="选项">
+          <VueDraggable
+            v-model="model.options"
+            :animation="150"
+            handle=".handle"
+          >
+            <div
+              v-for="(item, index) in model.options"
+              :key="index"
+              class="options"
+            >
+              <a-space>
+                <a-icon class="handle cursor-move" type="unordered-list" />
+                <a-input-group compact>
+                  <a-input style="width:50%" v-model="item.label" />
+                  <a-input style="width:50%" v-model="item.value" />
+                </a-input-group>
+                <a-icon type="close" @click="deleteOption(index)" />
+              </a-space>
+            </div>
+          </VueDraggable>
+          <a-button @click="addOption" style="width:100%"><a-icon type="plus" /></a-button>
         </a-form-item>
       </template>
     </a-form>
@@ -65,7 +86,11 @@
 
 <script>
 
+import { VueDraggable } from 'vue-draggable-plus'
 export default {
+  components: {
+    VueDraggable
+  },
   data () {
     return {
       model: {
@@ -92,6 +117,15 @@ export default {
       this.model = val
       this.config = config
     },
+    addOption () {
+      this.model.options.push({
+        label: '选项' + (this.model.options.length + 1),
+        value: 'newValue' + (this.model.options.length + 1)
+      })
+    },
+    deleteOption (i) {
+      this.model.options.splice(i, 1)
+    },
     onTabChange (key) {
       this.selectKey = key
     }
@@ -99,6 +133,8 @@ export default {
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+.options{
+  margin-bottom:5px ;
+}
 </style>

src/views/test/modules/components.js

@@ -46,6 +46,20 @@ export const componentList = [
     dependentId: false,
     required: true,
     label: '下拉框',
+    options: [
+      {
+        label: '选项1',
+        value: '1'
+      },
+      {
+        label: '选项2',
+        value: '2'
+      },
+      {
+        label: '选项3',
+        value: '3'
+      }
+    ],
     attrs: {
       placeholder: '请输入'
     }