wans

src/views/test/Test1.vue

@@ -1,10 +1,10 @@
 <template>
   <a-row :gutter="10">
     <a-col :span="5">
-      <a-card title="基础" style="min-height:600px">
+      <a-card title="基础" >
         <a-row>
           <VueDraggable
-            v-model="componentList"
+            v-model="componentBaseList"
             :animation="150"
             :group="{ name: 'people', pull: 'clone', put: false }"
             :sort="false"
@@ -12,7 +12,31 @@
           >
             <a-col
               :span="12"
-              v-for="item in componentList"
+              v-for="item in componentBaseList"
+              :key="item.id">
+              <div
+                class="hover type"
+              >
+                <a-space>
+                  <a-icon type="profile" /> {{ item.name }}
+                </a-space>
+              </div>
+            </a-col>
+          </VueDraggable>
+        </a-row>
+      </a-card>
+      <a-card title="高级" >
+        <a-row>
+          <VueDraggable
+            v-model="componenHidetList"
+            :animation="150"
+            :group="{ name: 'people', pull: 'clone', put: false }"
+            :sort="false"
+            :clone="onClone"
+          >
+            <a-col
+              :span="12"
+              v-for="item in componenHidetList"
               :key="item.id">
               <div
                 class="hover type"
@@ -67,7 +91,7 @@
 import { VueDraggable } from 'vue-draggable-plus'
 import Detail from './modules/Detail.vue'
 import MComponent from './modules/Component.vue'
-import { componentList } from './modules/components'
+import { componentBaseList, componenHidetList } from './modules/components'
 export default {
   name: 'Test1',
   components: {
@@ -78,7 +102,8 @@ export default {
   data () {
     return {
       form: this.$form.createForm(this),
-      componentList,
+      componentBaseList,
+      componenHidetList,
       list2: [],
       detail: {},
       config: {

src/views/test/modules/components.js

@@ -1,4 +1,4 @@
-export const componentList = [
+export const componentBaseList = [
   {
     id: 1,
     name: '单行文本',
@@ -78,6 +78,21 @@ export const componentList = [
       showTime: false
     }
   },
+  {
+    id: 8,
+    name: '分割线',
+    type: 'divider',
+    value: 'divider',
+    dependentId: false,
+    required: true,
+    label: '分割线',
+    attrs: {
+      orientation: 'center'
+    }
+  }
+]
+// 高级
+export const componenHidetList = [
   {
     id: 6,
     name: '文件上传',
@@ -103,17 +118,5 @@ export const componentList = [
       placeholder: '请输入',
       maxSize: 5
     }
-  },
-  {
-    id: 8,
-    name: '分割线',
-    type: 'divider',
-    value: 'divider',
-    dependentId: false,
-    required: true,
-    label: '分割线',
-    attrs: {
-      orientation: 'center'
-    }
   }
 ]