diff --git a/example/App.vue b/example/App.vue
index d4a468e..ee5b997 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -1,3 +1,4 @@
 <template>
   <AntdDesignForm />
+  <!-- <ElDesignForm /> -->
 </template>
diff --git a/src/config/antd.ts b/src/config/antd.ts
index 1672684..a642a28 100644
--- a/src/config/antd.ts
+++ b/src/config/antd.ts
@@ -1,3 +1,5 @@
+import { makeComponentMap } from '@/utils/makemap'
+
 export interface Rules {
   trigger: string
   enum: string
@@ -370,3 +372,5 @@ export const layoutComponents = [
     }
   }
 ]
+
+export const islayoutComponent = makeComponentMap(layoutComponents)
diff --git a/src/config/element.ts b/src/config/element.ts
index f6deb6e..3a52d18 100644
--- a/src/config/element.ts
+++ b/src/config/element.ts
@@ -1,3 +1,5 @@
+import { makeComponentMap } from '@/utils/makemap'
+
 export interface Rules {
   trigger: string
   enum: string
@@ -362,3 +364,5 @@ export const layoutComponents = [
     }
   }
 ]
+
+export const islayoutComponent = makeComponentMap(layoutComponents)
diff --git a/src/core/antd/AntdDesignForm.vue b/src/core/antd/AntdDesignForm.vue
index 903e782..7f28ca3 100644
--- a/src/core/antd/AntdDesignForm.vue
+++ b/src/core/antd/AntdDesignForm.vue
@@ -149,7 +149,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, PropType, toRefs, watchEffect } from 'vue'
+import { defineComponent, reactive, PropType, toRefs, watchEffect, provide } from 'vue'
 import { message } from 'ant-design-vue'
 import { defaultsDeep } from 'lodash'
 import CodeEditor from '@/components/CodeEditor.vue'
@@ -176,6 +176,11 @@ export default defineComponent({
     AntdWidgetConfig,
     AntdFormConfig
   },
+  data() {
+    return {
+      disabled: false
+    }
+  },
   props: {
     preview: {
       type: Boolean,
@@ -229,7 +234,7 @@ export default defineComponent({
       antd,
       codeType: CodeType,
       widgetForm: JSON.parse(JSON.stringify(antd.widgetForm)),
-      widgetFormSelect: null,
+      widgetFormSelect: null as any,
       generateFormRef: null as any,
       configTab: 'widget',
       previewVisible: false,
diff --git a/src/core/antd/AntdGenerateForm.vue b/src/core/antd/AntdGenerateForm.vue
index 6f30176..d0ea644 100644
--- a/src/core/antd/AntdGenerateForm.vue
+++ b/src/core/antd/AntdGenerateForm.vue
@@ -9,39 +9,16 @@
       :labelCol="widgetForm.config.labelCol"
       :hideRequiredMark="widgetForm.config.hideRequiredMark"
     >
-      <template v-for="(element, index) of widgetForm.list">
-        <template v-if="element.type === 'grid'">
-          <a-row
-            type="flex"
-            v-if="element.key"
-            :key="element.key"
-            :gutter="element.options.gutter ?? 0"
-            :justify="element.options.justify"
-            :align="element.options.align"
-          >
-            <a-col
-              v-for="(col, colIndex) of element.columns"
-              :key="colIndex"
-              :span="col.span ?? 0"
-            >
-              <AntdGenerateFormItem
-                v-for="colItem of col.list"
-                v-model:model="model"
-                :key="colItem.key"
-                :element="colItem"
-                :config="data.config"
-                :disabled="disabled"
-              />
-            </a-col>
-          </a-row>
-        </template>
+      <template v-for="(element) of widgetForm.list">
+        <AntdGenerateLayoutForm
+          v-if="islayoutComponent(element.type)"
+          :key="element.key"
+          :element="element"
+        />
         <AntdGenerateFormItem
           v-else
-          v-model:model="model"
           :key="element.key"
-          :element="widgetForm.list[index]"
-          :config="data.config"
-          :disabled="disabled"
+          :element="element"
         />
       </template>
     </a-form>
@@ -49,15 +26,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  provide,
+  reactive,
+  toRefs,
+  watch
+} from 'vue'
 import { message } from 'ant-design-vue'
 import AntdGenerateFormItem from './AntdGenerateFormItem.vue'
+import AntdGenerateLayoutForm from './AntdGenerateLayoutForm.vue'
 import { antd } from '@/config'
+import { islayoutComponent } from '@/config/antd'
 
 export default defineComponent({
   name: 'AntdGenerateForm',
   components: {
-    AntdGenerateFormItem
+    AntdGenerateFormItem,
+    AntdGenerateLayoutForm
   },
   props: {
     data: {
@@ -75,29 +63,43 @@ export default defineComponent({
   setup(props) {
     const state = reactive({
       generateForm: null as any,
-      model: {} as any,
       rules: {} as any,
       widgetForm:
         (props.data && JSON.parse(JSON.stringify(props.data))) ??
         antd.widgetForm
     })
+    const model = ref<any>({})
+
+    provide('model', model)
+    provide('config', props.data.config)
+
+    const disabled = ref<any>(props.disabled)
+    provide('disabled', disabled)
+    watch(
+      () => props.disabled,
+      val => (disabled.value = val)
+    )
+
+    provide('updateModel', (newModel:any) => {
+      model.value = newModel
+    })
 
     const generateModel = (list: any[]) => {
       for (let index = 0; index < list.length; index++) {
-        const model = list[index].model
-        if (!model) {
+        const modelKey = list[index].model
+        if (!modelKey) {
           return
         }
         if (list[index].type === 'grid') {
           list[index].columns.forEach((col: any) => generateModel(col.list))
         } else {
-          if (props.value && Object.keys(props.value).includes(model)) {
-            state.model[model] = props.value[model]
+          if (props.value && Object.keys(props.value).includes(modelKey)) {
+            model.value[modelKey] = props.value[modelKey]
           } else {
-            state.model[model] = list[index].options.defaultValue
+            model.value[modelKey] = list[index].options.defaultValue
           }
 
-          state.rules[model] = list[index].options.rules
+          state.rules[modelKey] = list[index].options.rules
         }
       }
     }
@@ -129,7 +131,7 @@ export default defineComponent({
       val => {
         state.widgetForm =
           (val && JSON.parse(JSON.stringify(val))) ?? antd.widgetForm
-        state.model = {}
+        model.value = {}
         state.rules = {}
         generateModel(state.widgetForm.list)
         generateOptions(state.widgetForm.list)
@@ -148,7 +150,7 @@ export default defineComponent({
           .validate()
           .then((validate: boolean) => {
             if (validate) {
-              resolve(state.model)
+              resolve(model.value)
             } else {
               message.error('验证失败')
             }
@@ -164,9 +166,11 @@ export default defineComponent({
     }
 
     return {
+      model,
       ...toRefs(state),
       getData,
-      reset
+      reset,
+      islayoutComponent
     }
   }
 })
diff --git a/src/core/antd/AntdGenerateFormItem.vue b/src/core/antd/AntdGenerateFormItem.vue
index d40339c..9649260 100644
--- a/src/core/antd/AntdGenerateFormItem.vue
+++ b/src/core/antd/AntdGenerateFormItem.vue
@@ -243,7 +243,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, inject, PropType } from 'vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import { WidgetForm } from '@/config/antd'
@@ -255,34 +255,29 @@ export default defineComponent({
     RichTextEditor
   },
   props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    },
     element: {
       type: Object,
       required: true
-    },
-    model: {
-      type: Object,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: true
     }
   },
-  emits: ['update:model'],
-  setup(props, context) {
+  setup(props) {
+    const model = inject<any>('model')
+    const updateModel = inject<any>('updateModel')
+    const disabled = inject<any>('disabled')
+
     const data = computed({
-      get: () => props.model[props.element.model],
+      get: () => {
+        return model.value[props.element.model]
+      },
       set: val => {
-        const model = JSON.parse(JSON.stringify(props.model))
-        model[props.element.model] = val
-        context.emit('update:model', model)
+        const modelTmp = JSON.parse(JSON.stringify(model.value))
+        modelTmp[props.element.model] = val
+        updateModel(modelTmp)
       }
     })
 
+    const config = inject<PropType<WidgetForm['config']>>('config')
+
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
 
@@ -292,8 +287,10 @@ export default defineComponent({
 
     return {
       data,
+      config,
       handleFilterOption,
-      handleUploadChange
+      handleUploadChange,
+      disabled
     }
   }
 })
diff --git a/src/core/antd/AntdGenerateLayoutForm.vue b/src/core/antd/AntdGenerateLayoutForm.vue
new file mode 100644
index 0000000..6ef25ed
--- /dev/null
+++ b/src/core/antd/AntdGenerateLayoutForm.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <template v-if="element.type === 'grid'">
+      <a-row
+        type="flex"
+        v-if="element.key"
+        :key="element.key"
+        :gutter="element.options.gutter ?? 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+      >
+        <a-col
+          v-for="(col, colIndex) of element.columns"
+          :key="colIndex"
+          :span="col.span ?? 0"
+        >
+          <template v-for="colItem of col.list">
+            <AntdGenerateLayoutForm
+              v-if="islayoutComponent(colItem.type)"
+              :key="colItem.key"
+              :element="colItem"
+            />
+            <AntdGenerateFormItem
+              v-else
+              :key="colItem.key"
+              :element="colItem"
+            />
+          </template>
+        </a-col>
+      </a-row>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import AntdGenerateFormItem from './AntdGenerateFormItem.vue'
+import { islayoutComponent } from '@/config/antd'
+
+export default defineComponent({
+  name: 'AntdGenerateLayoutForm',
+  components: {
+    AntdGenerateFormItem
+  },
+  props: {
+    element: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    return {
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/core/antd/AntdWidgetForm.vue b/src/core/antd/AntdWidgetForm.vue
index 3548d0e..43a9588 100644
--- a/src/core/antd/AntdWidgetForm.vue
+++ b/src/core/antd/AntdWidgetForm.vue
@@ -7,148 +7,28 @@
       :labelCol="widgetForm.config.labelCol"
       :hideRequiredMark="widgetForm.config.hideRequiredMark"
     >
-      <Draggable
-        class="widget-form-list"
-        item-key="key"
-        ghostClass="ghost"
-        handle=".drag-widget"
-        :animation="200"
-        :group="{ name: 'people' }"
+      <DraggableForm
         :list="widgetForm.list"
-        @add="handleMoveAdd"
-      >
-        <template #item="{ element, index }">
-          <transition-group name="fade" tag="div">
-            <template v-if="element.type === 'grid'">
-              <a-row
-                class="widget-col widget-view"
-                type="flex"
-                v-if="element.key"
-                :key="element.key"
-                :class="{ active: widgetFormSelect?.key === element.key }"
-                :gutter="element.options.gutter ?? 0"
-                :justify="element.options.justify"
-                :align="element.options.align"
-                @click="handleItemClick(element)"
-              >
-                <a-col
-                  v-for="(col, colIndex) of element.columns"
-                  :key="colIndex"
-                  :span="col.span ?? 0"
-                >
-                  <Draggable
-                    class="widget-col-list"
-                    item-key="key"
-                    ghostClass="ghost"
-                    handle=".drag-widget"
-                    :animation="200"
-                    :group="{ name: 'people' }"
-                    :no-transition-on-drag="true"
-                    :list="col.list"
-                    @add="handleColMoveAdd($event, element, colIndex)"
-                  >
-                    <template #item="{ element, index }">
-                      <transition-group name="fade" tag="div">
-                        <AntdWidgetFormItem
-                          v-if="element.key"
-                          :key="element.key"
-                          :element="element"
-                          :config="widgetForm.config"
-                          :selectWidget="widgetFormSelect"
-                          @click.stop="handleItemClick(element)"
-                          @copy="handleCopyClick(index, col.list)"
-                          @delete="handleDeleteClick(index, col.list)"
-                        />
-                      </transition-group>
-                    </template>
-                  </Draggable>
-                </a-col>
-                <div
-                  class="widget-view-action widget-col-action"
-                  v-if="widgetFormSelect?.key === element.key"
-                >
-                  <SvgIcon
-                    iconClass="delete"
-                    @click.stop="handleDeleteClick(index, widgetForm.list)"
-                  />
-                </div>
-
-                <div
-                  class="widget-view-drag widget-col-drag"
-                  v-if="widgetFormSelect?.key === element.key"
-                >
-                  <SvgIcon iconClass="move" className="drag-widget" />
-                </div>
-              </a-row>
-            </template>
-            <template v-else>
-              <AntdWidgetFormItem
-                v-if="element.key"
-                :key="element.key"
-                :element="element"
-                :config="widgetForm.config"
-                :selectWidget="widgetFormSelect"
-                @click="handleItemClick(element)"
-                @copy="handleCopyClick(index, widgetForm.list)"
-                @delete="handleDeleteClick(index, widgetForm.list)"
-              />
-            </template>
-          </transition-group>
-        </template>
-      </Draggable>
+        @handleMoveAdd="handleMoveAdd"
+        @handleItemClick="handleItemClick"
+        @handleCopyClick="handleCopyClick"
+        @handleDeleteClick="handleDeleteClick"
+      />
     </a-form>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from 'vue'
-import Draggable from 'vuedraggable'
+import { defineComponent, nextTick, PropType, provide, ref, watch, toRaw, isProxy } from 'vue'
 import { v4 } from 'uuid'
-import AntdWidgetFormItem from './AntdWidgetFormItem.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
 import { WidgetForm } from '@/config/antd'
-
-const handleListInsert = (key: string, list: any[], obj: any) => {
-  const newList: any[] = []
-  list.forEach(item => {
-    if (item.key === key) {
-      newList.push(item)
-      newList.push(obj)
-    } else {
-      if (item.columns) {
-        item.columns = item.columns.map((col: any) => ({
-          ...col,
-          list: handleListInsert(key, col.list, obj)
-        }))
-      }
-      newList.push(item)
-    }
-  })
-  return newList
-}
-
-const handleListDelete = (key: string, list: any[]) => {
-  const newList: any[] = []
-  list.forEach(item => {
-    if (item.key !== key) {
-      if (item.columns) {
-        item.columns = item.columns.map((col: any) => ({
-          ...col,
-          list: handleListDelete(key, col.list)
-        }))
-      }
-      newList.push(item)
-    }
-  })
-  return newList
-}
+import DraggableForm from '@/core/antd/components/DraggableForm.vue'
+import { handleListInsert, handleListDelete } from '@/utils/array'
 
 export default defineComponent({
   name: 'AntdWidgetForm',
   components: {
-    SvgIcon,
-    Draggable,
-    AntdWidgetFormItem
+    DraggableForm
   },
   props: {
     widgetForm: {
@@ -160,9 +40,40 @@ export default defineComponent({
     }
   },
   emits: ['update:widgetForm', 'update:widgetFormSelect'],
-  setup(props, context) {
+  setup(props:any, context) {
+    const updateSelectWidgetForm = (widgetFormSelect: any) => {
+      if (isProxy(widgetFormSelect)) {
+        widgetFormSelect = toRaw(widgetFormSelect)
+      }
+      context.emit('update:widgetFormSelect', widgetFormSelect)
+      // 手动触发select更新
+      select.value = widgetFormSelect
+    }
+
+    const updateWidgetForm = (widgetForm: any) => {
+      context.emit('update:widgetForm', widgetForm)
+    }
+
+    const select = ref<any>({})
+    provide('selectWidgetFormRef', select)
+    watch(
+      () => props.widgetFormSelect,
+      val => (select.value = val)
+    )
+    provide('getSelectWidgetForm', () => (props.widgetFormSelect))
+    provide('updateSelectWidgetForm', updateSelectWidgetForm)
+
+    const widgetForm = ref<any>({})
+    provide('widgetFormRef', widgetForm)
+    watch(
+      () => props.widgetForm,
+      val => (widgetForm.value = val)
+    )
+    provide('getWidgetForm', () => (props.widgetForm))
+    provide('updateWidgetForm', updateWidgetForm)
+
     const handleItemClick = (row: any) => {
-      context.emit('update:widgetFormSelect', row)
+      updateSelectWidgetForm(row)
     }
 
     const handleCopyClick = (index: number, list: any[]) => {
@@ -190,12 +101,12 @@ export default defineComponent({
         }
       }
 
-      context.emit('update:widgetForm', {
+      updateWidgetForm({
         ...props.widgetForm,
         list: handleListInsert(list[index].key, oldList, copyData)
       })
 
-      context.emit('update:widgetFormSelect', copyData)
+      updateSelectWidgetForm(copyData)
     }
 
     const handleDeleteClick = (index: number, list: any[]) => {
@@ -203,15 +114,15 @@ export default defineComponent({
 
       if (list.length - 1 === index) {
         if (index === 0) {
-          nextTick(() => context.emit('update:widgetFormSelect', null))
+          nextTick(() => updateSelectWidgetForm(null))
         } else {
-          context.emit('update:widgetFormSelect', list[index - 1])
+          updateSelectWidgetForm(list[index - 1])
         }
       } else {
-        context.emit('update:widgetFormSelect', list[index + 1])
+        updateSelectWidgetForm(list[index + 1])
       }
 
-      context.emit('update:widgetForm', {
+      updateWidgetForm({
         ...props.widgetForm,
         list: handleListDelete(list[index].key, oldList)
       })
@@ -223,6 +134,8 @@ export default defineComponent({
       const key = v4().replaceAll('-', '')
       const list = JSON.parse(JSON.stringify(props.widgetForm.list))
 
+      list[newIndex] = JSON.parse(JSON.stringify(list[newIndex]))
+
       list[newIndex] = {
         ...list[newIndex],
         key,
@@ -253,9 +166,9 @@ export default defineComponent({
         }
       }
 
-      context.emit('update:widgetForm', { ...props.widgetForm, list })
+      updateWidgetForm({ ...props.widgetForm, list })
 
-      context.emit('update:widgetFormSelect', list[newIndex])
+      updateSelectWidgetForm(list[newIndex])
     }
 
     const handleColMoveAdd = (event: any, row: any, index: number) => {
@@ -294,7 +207,7 @@ export default defineComponent({
         }
       }
 
-      context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
+      updateSelectWidgetForm(row.columns[index].list[newIndex])
     }
 
     return {
diff --git a/src/core/antd/AntdWidgetFormItem.vue b/src/core/antd/AntdWidgetFormItem.vue
index 081a0bf..3ea4642 100644
--- a/src/core/antd/AntdWidgetFormItem.vue
+++ b/src/core/antd/AntdWidgetFormItem.vue
@@ -251,10 +251,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, inject } from 'vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
-import { WidgetForm } from '@/config/antd'
 
 export default defineComponent({
   name: 'AntdWidgetFormItem',
@@ -263,24 +262,24 @@ export default defineComponent({
     RichTextEditor
   },
   props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    },
     element: {
       type: Object,
       required: true
-    },
-    selectWidget: {
-      type: Object
     }
   },
   emits: ['copy', 'delete'],
   setup() {
+    const widgetForm = inject<any>('widgetFormRef')
+    const selectWidget = inject('selectWidgetFormRef')
+
+    const config = widgetForm.value.config
+
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
 
     return {
+      config,
+      selectWidget,
       handleFilterOption
     }
   }
diff --git a/src/core/antd/AntdWidgetLayoutForm.vue b/src/core/antd/AntdWidgetLayoutForm.vue
new file mode 100644
index 0000000..fc2b08e
--- /dev/null
+++ b/src/core/antd/AntdWidgetLayoutForm.vue
@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <template v-if="element.type === 'grid'">
+      <a-row
+        class="widget-col widget-view"
+        type="flex"
+        v-if="element.key"
+        :key="element.key"
+        :class="{ active: selectWidgetForm?.key === element.key }"
+        :gutter="element.options.gutter ?? 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+      >
+        <a-col
+          v-for="(col, colIndex) of element.columns"
+          :key="colIndex"
+          :span="col.span ?? 0"
+        >
+          <DraggableForm
+            :formClass="['widget-col-list']"
+            :list="col.list"
+            :layoutElement="element"
+            :colIndex="colIndex"
+            @handleMoveAdd="handleColMoveAdd"
+            @handleItemClick="handleItemClick"
+            @handleCopyClick="handleCopyClick"
+            @handleDeleteClick="handleDeleteClick"
+          />
+        </a-col>
+        <div
+          class="widget-view-action widget-col-action"
+          v-if="selectWidgetForm?.key === element.key"
+        >
+          <SvgIcon
+            iconClass="delete"
+            @click.stop="handleDeleteClick(index, widgetForm.value.list)"
+          />
+        </div>
+
+        <div
+          class="widget-view-drag widget-col-drag"
+          v-if="selectWidgetForm?.key === element.key"
+        >
+          <SvgIcon iconClass="move" className="drag-widget" />
+        </div>
+      </a-row>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, nextTick } from 'vue'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { v4 } from 'uuid'
+import { handleListInsert, handleListDelete } from '@/utils/array'
+import { islayoutComponent } from '@/config/antd'
+import DraggableForm from './components/DraggableForm.vue'
+
+export default defineComponent({
+  name: 'AntdWidgetLayoutForm',
+  components: {
+    SvgIcon,
+    DraggableForm
+  },
+  props: {
+    element: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const selectWidgetForm = inject('selectWidgetFormRef')
+    const getSelectWidgetForm = inject<any>('getSelectWidgetForm')
+    const updateSelectWidgetForm = inject<any>('updateSelectWidgetForm')
+
+    const widgetForm = inject<any>('widgetFormRef')
+    const getWidgetForm = inject<any>('getWidgetForm')
+    const updateWidgetForm = inject<any>('updateWidgetForm')
+
+    const handleItemClick = (row: any) => {
+      updateSelectWidgetForm(row)
+    }
+
+    const handleCopyClick = (index: number, list: any[]) => {
+      const newWidgetForm = getWidgetForm()
+      const key = v4().replaceAll('-', '')
+      const oldList = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      let copyData = {
+        ...list[index],
+        key,
+        model: `${list[index].type}_${key}`,
+        rules: list[index].rules ?? []
+      }
+
+      if (
+        list[index].type === 'radio' ||
+        list[index].type === 'checkbox' ||
+        list[index].type === 'select'
+      ) {
+        copyData = {
+          ...copyData,
+          options: {
+            ...copyData.options,
+            options: copyData.options.options.map((item: any) => ({ ...item }))
+          }
+        }
+      }
+      const temp = {
+        ...newWidgetForm,
+        list: handleListInsert(list[index].key, oldList, copyData)
+      }
+
+      updateWidgetForm(temp)
+
+      updateSelectWidgetForm(copyData)
+    }
+
+    const handleDeleteClick = (index: number, list: any[]) => {
+      const newWidgetForm = getWidgetForm()
+      const currentSelectWidgetForm = getSelectWidgetForm()
+      const oldList = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      if (list.length - 1 === index) {
+        if (index === 0) {
+          nextTick(() => updateSelectWidgetForm(null))
+        } else {
+          updateSelectWidgetForm(list[index - 1])
+        }
+      } else {
+        updateSelectWidgetForm(list[index + 1])
+      }
+
+      updateWidgetForm({
+        ...newWidgetForm,
+        list: handleListDelete(currentSelectWidgetForm.key, oldList)
+      })
+    }
+
+    const handleColMoveAdd = (event: any, row: any, index: number) => {
+      const newWidgetForm = getWidgetForm()
+      const { newIndex, oldIndex, item } = event
+      const list = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      if (item.className.includes('data-grid')) {
+        item.tagName === 'DIV' &&
+          list.splice(oldIndex, 0, row.columns[index].list[newIndex])
+        row.columns[index].list.splice(newIndex, 1)
+        return false
+      }
+
+      const key = v4().replaceAll('-', '')
+
+      row.columns[index].list[newIndex] = JSON.parse(JSON.stringify(row.columns[index].list[newIndex]))
+
+      row.columns[index].list[newIndex] = {
+        ...row.columns[index].list[newIndex],
+        key,
+        model: `${row.columns[index].list[newIndex].type}_${key}`,
+        rules: []
+      }
+
+      if (
+        row.columns[index].list[newIndex].type === 'radio' ||
+        row.columns[index].list[newIndex].type === 'checkbox' ||
+        row.columns[index].list[newIndex].type === 'select'
+      ) {
+        row.columns[index].list[newIndex] = {
+          ...row.columns[index].list[newIndex],
+          options: {
+            ...row.columns[index].list[newIndex].options,
+            options: row.columns[index].list[
+              newIndex
+            ].options.options.map((ite: any) => ({ ...ite }))
+          }
+        }
+      }
+
+      updateSelectWidgetForm(row.columns[index].list[newIndex])
+    }
+
+    return {
+      widgetForm,
+      selectWidgetForm,
+      handleItemClick,
+      handleCopyClick,
+      handleDeleteClick,
+      handleColMoveAdd,
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/core/antd/components/DraggableForm.vue b/src/core/antd/components/DraggableForm.vue
new file mode 100644
index 0000000..4d2c615
--- /dev/null
+++ b/src/core/antd/components/DraggableForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <Draggable
+    :class="formClass"
+    item-key="key"
+    ghostClass="ghost"
+    handle=".drag-widget"
+    :animation="200"
+    :group="{ name: 'people' }"
+    :list="list"
+    @add="handleColMoveAdd($event, layoutElement, colIndex)"
+  >
+    <template #item="{ element, index }">
+      <transition-group name="fade" tag="div">
+        <template v-if="islayoutComponent(element.type)">
+          <AntdWidgetLayoutForm
+            :element="element"
+            @click.stop="handleItemClick(element)"
+          />
+        </template>
+        <template v-else>
+          <AntdWidgetFormItem
+            v-if="element.key"
+            :key="element.key"
+            :element="element"
+            @click.stop="handleItemClick(element)"
+            @copy="handleCopyClick(index, list)"
+            @delete="handleDeleteClick(index, list)"
+          />
+        </template>
+      </transition-group>
+    </template>
+  </Draggable>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue'
+import { islayoutComponent } from '@/config/antd'
+import Draggable from 'vuedraggable'
+import AntdWidgetFormItem from '@/core/antd/AntdWidgetFormItem.vue'
+
+export default defineComponent({
+  name: 'DraggableForm',
+  components: {
+    Draggable,
+    AntdWidgetFormItem,
+    AntdWidgetLayoutForm: defineAsyncComponent(() => import('@/core/antd/AntdWidgetLayoutForm.vue'))
+  },
+  props: {
+    list: {
+      type: Array,
+      required: true
+    },
+    layoutElement: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    colIndex: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    formClass: {
+      type: Array,
+      default() {
+        return ['widget-form-list']
+      }
+    }
+  },
+  emits: ['handleMoveAdd', 'handleItemClick', 'handleCopyClick', 'handleDeleteClick'],
+  setup(props, context) {
+    const handleColMoveAdd = ($event:any, element:any, colIndex:number) => {
+      context.emit('handleMoveAdd', $event, element, colIndex)
+    }
+    const handleItemClick = (element:any) => {
+      context.emit('handleItemClick', element)
+    }
+    const handleCopyClick = (index:number, list:any) => {
+      context.emit('handleCopyClick', index, list)
+    }
+    const handleDeleteClick = (index:number, list:any) => {
+      context.emit('handleDeleteClick', index, list)
+    }
+    return {
+      handleColMoveAdd,
+      handleItemClick,
+      handleCopyClick,
+      handleDeleteClick,
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/core/element/ElGenerateForm.vue b/src/core/element/ElGenerateForm.vue
index 9e71302..21853b1 100644
--- a/src/core/element/ElGenerateForm.vue
+++ b/src/core/element/ElGenerateForm.vue
@@ -11,31 +11,11 @@
       :hide-required-asterisk="widgetForm.config.hideRequiredAsterisk"
     >
       <template v-for="(element, index) of widgetForm.list">
-        <template v-if="element.type === 'grid'">
-          <el-row
-            type="flex"
-            v-if="element.key"
-            :key="element.key"
-            :gutter="element.options.gutter ?? 0"
-            :justify="element.options.justify"
-            :align="element.options.align"
-          >
-            <el-col
-              v-for="(col, colIndex) of element.columns"
-              :key="colIndex"
-              :span="col.span ?? 0"
-            >
-              <ElGenerateFormItem
-                v-for="colItem of col.list"
-                v-model:model="model"
-                :key="colItem.key"
-                :element="colItem"
-                :config="data.config"
-                :disabled="disabled"
-              />
-            </el-col>
-          </el-row>
-        </template>
+        <ElGenerateLayoutForm
+          v-if="islayoutComponent(element.type)"
+          :key="element.key"
+          :element="element"
+        />
         <ElGenerateFormItem
           v-else
           v-model:model="model"
@@ -50,15 +30,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  provide,
+  reactive,
+  toRefs,
+  watch
+} from 'vue'
 import { ElMessage } from 'element-plus'
 import ElGenerateFormItem from './ElGenerateFormItem.vue'
+import ElGenerateLayoutForm from './ElGenerateLayoutForm.vue'
 import { element } from '@/config'
+import { islayoutComponent } from '@/config/element'
 
 export default defineComponent({
   name: 'ElGenerateForm',
   components: {
-    ElGenerateFormItem
+    ElGenerateFormItem,
+    ElGenerateLayoutForm
   },
   props: {
     data: {
@@ -76,29 +67,43 @@ export default defineComponent({
   setup(props) {
     const state = reactive({
       generateForm: null as any,
-      model: {} as any,
       rules: {} as any,
       widgetForm:
         (props.data && JSON.parse(JSON.stringify(props.data))) ??
         element.widgetForm
     })
 
+    const model = ref<any>({})
+
+    provide('model', model)
+    provide('config', props.data.config)
+    const disabled = ref<any>(props.disabled)
+    provide('disabled', disabled)
+    watch(
+      () => props.disabled,
+      val => (disabled.value = val)
+    )
+
+    provide('updateModel', (newModel:any) => {
+      model.value = newModel
+    })
+
     const generateModel = (list: any[]) => {
       for (let index = 0; index < list.length; index++) {
-        const model = list[index].model
-        if (!model) {
+        const modelKey = list[index].model
+        if (!modelKey) {
           return
         }
         if (list[index].type === 'grid') {
           list[index].columns.forEach((col: any) => generateModel(col.list))
         } else {
-          if (props.value && Object.keys(props.value).includes(model)) {
-            state.model[model] = props.value[model]
+          if (props.value && Object.keys(props.value).includes(modelKey)) {
+            model.value[modelKey] = props.value[modelKey]
           } else {
-            state.model[model] = list[index].options.defaultValue
+            model.value[modelKey] = list[index].options.defaultValue
           }
 
-          state.rules[model] = list[index].options.rules
+          state.rules[modelKey] = list[index].options.rules
         }
       }
     }
@@ -130,7 +135,7 @@ export default defineComponent({
       val => {
         state.widgetForm =
           (val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
-        state.model = {}
+        model.value = {}
         state.rules = {}
         generateModel(state.widgetForm.list)
         generateOptions(state.widgetForm.list)
@@ -149,7 +154,7 @@ export default defineComponent({
           .validate()
           .then((validate: boolean) => {
             if (validate) {
-              resolve(state.model)
+              resolve(model.value)
             } else {
               ElMessage.error('验证失败')
             }
@@ -165,9 +170,11 @@ export default defineComponent({
     }
 
     return {
+      model,
       ...toRefs(state),
       getData,
-      reset
+      reset,
+      islayoutComponent
     }
   }
 })
diff --git a/src/core/element/ElGenerateFormItem.vue b/src/core/element/ElGenerateFormItem.vue
index 41ba83b..ad8c7f1 100644
--- a/src/core/element/ElGenerateFormItem.vue
+++ b/src/core/element/ElGenerateFormItem.vue
@@ -253,7 +253,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, inject } from 'vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import { WidgetForm } from '@/config/element'
@@ -265,34 +265,27 @@ export default defineComponent({
     RichTextEditor
   },
   props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    },
     element: {
       type: Object,
       required: true
-    },
-    model: {
-      type: Object,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: true
     }
   },
-  emits: ['update:model'],
-  setup(props, context) {
+  setup(props) {
+    const model = inject<any>('model')
+    const updateModel = inject<any>('updateModel')
+    const disabled = inject<any>('disabled')
+
     const data = computed({
-      get: () => props.model[props.element.model],
+      get: () => model.value[props.element.model],
       set: val => {
-        const model = JSON.parse(JSON.stringify(props.model))
-        model[props.element.model] = val
-        context.emit('update:model', model)
+        const modelTmp = JSON.parse(JSON.stringify(model.value))
+        modelTmp[props.element.model] = val
+        updateModel(modelTmp)
       }
     })
 
+    const config = inject<PropType<WidgetForm['config']>>('config')
+
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
 
@@ -302,8 +295,10 @@ export default defineComponent({
 
     return {
       data,
+      config,
       handleFilterOption,
-      handleUploadSuccess
+      handleUploadSuccess,
+      disabled
     }
   }
 })
diff --git a/src/core/element/ElGenerateLayoutForm.vue b/src/core/element/ElGenerateLayoutForm.vue
new file mode 100644
index 0000000..d7120de
--- /dev/null
+++ b/src/core/element/ElGenerateLayoutForm.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <template v-if="element.type === 'grid'">
+      <a-row
+        type="flex"
+        v-if="element.key"
+        :key="element.key"
+        :gutter="element.options.gutter ?? 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+      >
+        <a-col
+          v-for="(col, colIndex) of element.columns"
+          :key="colIndex"
+          :span="col.span ?? 0"
+        >
+          <template v-for="colItem of col.list">
+            <ElGenerateLayoutForm
+              v-if="islayoutComponent(colItem.type)"
+              :key="colItem.key"
+              :element="colItem"
+            />
+            <ElGenerateFormItem
+              v-else
+              :key="colItem.key"
+              :element="colItem"
+            />
+          </template>
+        </a-col>
+      </a-row>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ElGenerateFormItem from './ElGenerateFormItem.vue'
+import { islayoutComponent } from '@/config/antd'
+
+export default defineComponent({
+  name: 'ElGenerateLayoutForm',
+  components: {
+    ElGenerateFormItem
+  },
+  props: {
+    element: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    return {
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/core/element/ElWidgetForm.vue b/src/core/element/ElWidgetForm.vue
index b5d9fbc..2d96e93 100644
--- a/src/core/element/ElWidgetForm.vue
+++ b/src/core/element/ElWidgetForm.vue
@@ -8,148 +8,28 @@
       :label-width="`${widgetForm.config.labelWidth}px`"
       :hide-required-asterisk="widgetForm.config.hideRequiredAsterisk"
     >
-      <Draggable
-        class="widget-form-list"
-        item-key="key"
-        ghostClass="ghost"
-        handle=".drag-widget"
-        :animation="200"
-        :group="{ name: 'people' }"
+      <ElDraggableForm
         :list="widgetForm.list"
-        @add="handleMoveAdd"
-      >
-        <template #item="{ element, index }">
-          <transition-group name="fade" tag="div">
-            <template v-if="element.type === 'grid'">
-              <el-row
-                class="widget-col widget-view"
-                type="flex"
-                v-if="element.key"
-                :key="element.key"
-                :class="{ active: widgetFormSelect?.key === element.key }"
-                :gutter="element.options.gutter ?? 0"
-                :justify="element.options.justify"
-                :align="element.options.align"
-                @click="handleItemClick(element)"
-              >
-                <el-col
-                  v-for="(col, colIndex) of element.columns"
-                  :key="colIndex"
-                  :span="col.span ?? 0"
-                >
-                  <Draggable
-                    class="widget-col-list"
-                    item-key="key"
-                    ghostClass="ghost"
-                    handle=".drag-widget"
-                    :animation="200"
-                    :group="{ name: 'people' }"
-                    :no-transition-on-drag="true"
-                    :list="col.list"
-                    @add="handleColMoveAdd($event, element, colIndex)"
-                  >
-                    <template #item="{ element, index }">
-                      <transition-group name="fade" tag="div">
-                        <ElWidgetFormItem
-                          v-if="element.key"
-                          :key="element.key"
-                          :element="element"
-                          :config="widgetForm.config"
-                          :selectWidget="widgetFormSelect"
-                          @click.stop="handleItemClick(element)"
-                          @copy="handleCopyClick(index, col.list)"
-                          @delete="handleDeleteClick(index, col.list)"
-                        />
-                      </transition-group>
-                    </template>
-                  </Draggable>
-                </el-col>
-                <div
-                  class="widget-view-action widget-col-action"
-                  v-if="widgetFormSelect?.key === element.key"
-                >
-                  <SvgIcon
-                    iconClass="delete"
-                    @click.stop="handleDeleteClick(index, widgetForm.list)"
-                  />
-                </div>
-
-                <div
-                  class="widget-view-drag widget-col-drag"
-                  v-if="widgetFormSelect?.key === element.key"
-                >
-                  <SvgIcon iconClass="move" className="drag-widget" />
-                </div>
-              </el-row>
-            </template>
-            <template v-else>
-              <ElWidgetFormItem
-                v-if="element.key"
-                :key="element.key"
-                :element="element"
-                :config="widgetForm.config"
-                :selectWidget="widgetFormSelect"
-                @click="handleItemClick(element)"
-                @copy="handleCopyClick(index, widgetForm.list)"
-                @delete="handleDeleteClick(index, widgetForm.list)"
-              />
-            </template>
-          </transition-group>
-        </template>
-      </Draggable>
+        @handleMoveAdd="handleMoveAdd"
+        @handleItemClick="handleItemClick"
+        @handleCopyClick="handleCopyClick"
+        @handleDeleteClick="handleDeleteClick"
+      />
     </el-form>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType } from 'vue'
-import Draggable from 'vuedraggable'
+import { defineComponent, nextTick, PropType, provide, ref, watch, toRaw, isProxy } from 'vue'
 import { v4 } from 'uuid'
-import ElWidgetFormItem from './ElWidgetFormItem.vue'
-import SvgIcon from '@/components/SvgIcon.vue'
-import { WidgetForm } from '@/config/element'
-
-const handleListInsert = (key: string, list: any[], obj: any) => {
-  const newList: any[] = []
-  list.forEach(item => {
-    if (item.key === key) {
-      newList.push(item)
-      newList.push(obj)
-    } else {
-      if (item.columns) {
-        item.columns = item.columns.map((col: any) => ({
-          ...col,
-          list: handleListInsert(key, col.list, obj)
-        }))
-      }
-      newList.push(item)
-    }
-  })
-  return newList
-}
-
-const handleListDelete = (key: string, list: any[]) => {
-  const newList: any[] = []
-  list.forEach(item => {
-    if (item.key !== key) {
-      if (item.columns) {
-        item.columns = item.columns.map((col: any) => ({
-          ...col,
-          list: handleListDelete(key, col.list)
-        }))
-      }
-      newList.push(item)
-    }
-  })
-  return newList
-}
+import { WidgetForm, islayoutComponent } from '@/config/element'
+import { handleListInsert, handleListDelete } from '@/utils/array'
+import ElDraggableForm from './components/ElDraggableForm.vue'
 
 export default defineComponent({
   name: 'ElWidgetForm',
   components: {
-    SvgIcon,
-    Draggable,
-    ElWidgetFormItem
+    ElDraggableForm
   },
   props: {
     widgetForm: {
@@ -162,8 +42,42 @@ export default defineComponent({
   },
   emits: ['update:widgetForm', 'update:widgetFormSelect'],
   setup(props, context) {
+    const updateSelectWidgetForm = (widgetFormSelect: any) => {
+      if (isProxy(widgetFormSelect)) {
+        widgetFormSelect = toRaw(widgetFormSelect)
+      }
+      context.emit('update:widgetFormSelect', widgetFormSelect)
+      // 手动触发select更新
+      select.value = widgetFormSelect
+    }
+
+    const updateWidgetForm = (widgetForm: any) => {
+      context.emit('update:widgetForm', widgetForm)
+    }
+
+    const select = ref<any>({})
+    provide('selectWidgetFormRef', select)
+    watch(
+      () => props.widgetFormSelect,
+      val => {
+        // 层次深了监听会不起效果
+        select.value = val
+      }
+    )
+    provide('getSelectWidgetForm', () => (props.widgetFormSelect))
+    provide('updateSelectWidgetForm', updateSelectWidgetForm)
+
+    const widgetForm = ref<any>({})
+    provide('widgetFormRef', widgetForm)
+    watch(
+      () => props.widgetForm,
+      val => (widgetForm.value = val)
+    )
+    provide('getWidgetForm', () => (props.widgetForm))
+    provide('updateWidgetForm', updateWidgetForm)
+
     const handleItemClick = (row: any) => {
-      context.emit('update:widgetFormSelect', row)
+      updateSelectWidgetForm(row)
     }
 
     const handleCopyClick = (index: number, list: any[]) => {
@@ -191,12 +105,12 @@ export default defineComponent({
         }
       }
 
-      context.emit('update:widgetForm', {
+      updateWidgetForm({
         ...props.widgetForm,
         list: handleListInsert(list[index].key, oldList, copyData)
       })
 
-      context.emit('update:widgetFormSelect', copyData)
+      updateSelectWidgetForm(copyData)
     }
 
     const handleDeleteClick = (index: number, list: any[]) => {
@@ -204,15 +118,15 @@ export default defineComponent({
 
       if (list.length - 1 === index) {
         if (index === 0) {
-          nextTick(() => context.emit('update:widgetFormSelect', null))
+          nextTick(() => updateSelectWidgetForm(null))
         } else {
-          context.emit('update:widgetFormSelect', list[index - 1])
+          updateSelectWidgetForm(list[index - 1])
         }
       } else {
-        context.emit('update:widgetFormSelect', list[index + 1])
+        updateSelectWidgetForm(list[index + 1])
       }
 
-      context.emit('update:widgetForm', {
+      updateWidgetForm({
         ...props.widgetForm,
         list: handleListDelete(list[index].key, oldList)
       })
@@ -224,6 +138,8 @@ export default defineComponent({
       const key = v4().replaceAll('-', '')
       const list = JSON.parse(JSON.stringify(props.widgetForm.list))
 
+      list[newIndex] = JSON.parse(JSON.stringify(list[newIndex]))
+
       list[newIndex] = {
         ...list[newIndex],
         key,
@@ -253,48 +169,10 @@ export default defineComponent({
           columns: list[newIndex].columns.map((item: any) => ({ ...item }))
         }
       }
-      context.emit('update:widgetForm', { ...props.widgetForm, list })
-
-      context.emit('update:widgetFormSelect', list[newIndex])
-    }
 
-    const handleColMoveAdd = (event: any, row: any, index: number) => {
-      const { newIndex, oldIndex, item } = event
-      const list = JSON.parse(JSON.stringify(props.widgetForm.list))
-
-      if (item.className.includes('data-grid')) {
-        item.tagName === 'DIV' &&
-          list.splice(oldIndex, 0, row.columns[index].list[newIndex])
-        row.columns[index].list.splice(newIndex, 1)
-        return false
-      }
-
-      const key = v4().replaceAll('-', '')
-
-      row.columns[index].list[newIndex] = {
-        ...row.columns[index].list[newIndex],
-        key,
-        model: `${row.columns[index].list[newIndex].type}_${key}`,
-        rules: []
-      }
-
-      if (
-        row.columns[index].list[newIndex].type === 'radio' ||
-        row.columns[index].list[newIndex].type === 'checkbox' ||
-        row.columns[index].list[newIndex].type === 'select'
-      ) {
-        row.columns[index].list[newIndex] = {
-          ...row.columns[index].list[newIndex],
-          options: {
-            ...row.columns[index].list[newIndex].options,
-            options: row.columns[index].list[
-              newIndex
-            ].options.options.map((item: any) => ({ ...item }))
-          }
-        }
-      }
+      updateWidgetForm({ ...props.widgetForm, list })
 
-      context.emit('update:widgetFormSelect', row.columns[index].list[newIndex])
+      updateSelectWidgetForm(list[newIndex])
     }
 
     return {
@@ -302,7 +180,7 @@ export default defineComponent({
       handleCopyClick,
       handleDeleteClick,
       handleMoveAdd,
-      handleColMoveAdd
+      islayoutComponent
     }
   }
 })
diff --git a/src/core/element/ElWidgetFormItem.vue b/src/core/element/ElWidgetFormItem.vue
index a5cb1da..2d9b7ef 100644
--- a/src/core/element/ElWidgetFormItem.vue
+++ b/src/core/element/ElWidgetFormItem.vue
@@ -255,10 +255,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, inject } from 'vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
-import { WidgetForm } from '@/config/element'
 
 export default defineComponent({
   name: 'ElWidgetFormItem',
@@ -267,18 +266,26 @@ export default defineComponent({
     RichTextEditor
   },
   props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    },
     element: {
       type: Object,
       required: true
-    },
-    selectWidget: {
-      type: Object
     }
   },
-  emits: ['copy', 'delete']
+  emits: ['copy', 'delete'],
+  setup() {
+    const widgetForm = inject<any>('widgetFormRef')
+    const selectWidget = inject('selectWidgetFormRef')
+
+    const config = widgetForm.value.config
+
+    const handleFilterOption = (input: string, option: { label: string }) =>
+      option.label.toLowerCase().includes(input)
+
+    return {
+      config,
+      selectWidget,
+      handleFilterOption
+    }
+  }
 })
 </script>
diff --git a/src/core/element/ElWidgetLayoutForm.vue b/src/core/element/ElWidgetLayoutForm.vue
new file mode 100644
index 0000000..3f7e2ad
--- /dev/null
+++ b/src/core/element/ElWidgetLayoutForm.vue
@@ -0,0 +1,200 @@
+<template>
+  <div>
+    <template v-if="element.type === 'grid'">
+      <el-row
+        class="widget-col widget-view"
+        type="flex"
+        v-if="element.key"
+        :key="element.key"
+        :class="{ active: selectWidgetForm?.key === element.key }"
+        :gutter="element.options.gutter ?? 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+      >
+        <el-col
+          v-for="(col, colIndex) of element.columns"
+          :key="colIndex"
+          :span="col.span ?? 0"
+        >
+          <ElDraggableForm
+            :formClass="['widget-col-list']"
+            :list="col.list"
+            :layoutElement="element"
+            :colIndex="colIndex"
+            @handleMoveAdd="handleColMoveAdd"
+            @handleItemClick="handleItemClick"
+            @handleCopyClick="handleCopyClick"
+            @handleDeleteClick="handleDeleteClick"
+          />
+        </el-col>
+        <div
+          class="widget-view-action widget-col-action"
+          v-if="selectWidgetForm?.key === element.key"
+        >
+          <SvgIcon
+            iconClass="delete"
+            @click.stop="handleDeleteClick(index, widgetForm.list)"
+          />
+        </div>
+
+        <div
+          class="widget-view-drag widget-col-drag"
+          v-if="selectWidgetForm?.key === element.key"
+        >
+          <SvgIcon iconClass="move" className="drag-widget" />
+        </div>
+      </el-row>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, nextTick } from 'vue'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { v4 } from 'uuid'
+import { handleListInsert, handleListDelete } from '@/utils/array'
+import { islayoutComponent } from '@/config/element'
+import ElDraggableForm from './components/ElDraggableForm.vue'
+
+export default defineComponent({
+  name: 'ElWidgetLayoutForm',
+  components: {
+    SvgIcon,
+    ElDraggableForm
+  },
+  props: {
+    element: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup() {
+    const selectWidgetForm = inject('selectWidgetFormRef')
+    const getSelectWidgetForm = inject<any>('getSelectWidgetForm')
+    const updateSelectWidgetForm = inject<any>('updateSelectWidgetForm')
+
+    const widgetForm = inject<any>('widgetFormRef')
+    const getWidgetForm = inject<any>('getWidgetForm')
+    const updateWidgetForm = inject<any>('updateWidgetForm')
+
+    const handleItemClick = (row: any) => {
+      updateSelectWidgetForm(row)
+    }
+
+    const handleCopyClick = (index: number, list: any[]) => {
+      const newWidgetForm = getWidgetForm()
+      const key = v4().replaceAll('-', '')
+      const oldList = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      let copyData = {
+        ...list[index],
+        key,
+        model: `${list[index].type}_${key}`,
+        rules: list[index].rules ?? []
+      }
+
+      if (
+        list[index].type === 'radio' ||
+        list[index].type === 'checkbox' ||
+        list[index].type === 'select'
+      ) {
+        copyData = {
+          ...copyData,
+          options: {
+            ...copyData.options,
+            options: copyData.options.options.map((item: any) => ({ ...item }))
+          }
+        }
+      }
+      const temp = {
+        ...newWidgetForm,
+        list: handleListInsert(list[index].key, oldList, copyData)
+      }
+
+      updateWidgetForm(temp)
+
+      updateSelectWidgetForm(copyData)
+    }
+
+    const handleDeleteClick = (index: number, list: any[]) => {
+      const newWidgetForm = getWidgetForm()
+      const currentSelectWidgetForm = getSelectWidgetForm()
+      const oldList = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      if (list.length - 1 === index) {
+        if (index === 0) {
+          nextTick(() => updateSelectWidgetForm(null))
+        } else {
+          updateSelectWidgetForm(list[index - 1])
+        }
+      } else {
+        updateSelectWidgetForm(list[index + 1])
+      }
+
+      updateWidgetForm({
+        ...newWidgetForm,
+        list: handleListDelete(currentSelectWidgetForm.key, oldList)
+      })
+    }
+
+    const handleColMoveAdd = (event: any, row: any, index: number) => {
+      const newWidgetForm = getWidgetForm()
+      const { newIndex, oldIndex, item } = event
+      const list = JSON.parse(JSON.stringify(newWidgetForm.list))
+
+      if (item.className.includes('data-grid')) {
+        item.tagName === 'DIV' &&
+          list.splice(oldIndex, 0, row.columns[index].list[newIndex])
+        row.columns[index].list.splice(newIndex, 1)
+        return false
+      }
+
+      const key = v4().replaceAll('-', '')
+
+      row.columns[index].list[newIndex] = JSON.parse(JSON.stringify(row.columns[index].list[newIndex]))
+
+      row.columns[index].list[newIndex] = {
+        ...row.columns[index].list[newIndex],
+        key,
+        model: `${row.columns[index].list[newIndex].type}_${key}`,
+        rules: []
+      }
+
+      if (
+        row.columns[index].list[newIndex].type === 'radio' ||
+        row.columns[index].list[newIndex].type === 'checkbox' ||
+        row.columns[index].list[newIndex].type === 'select'
+      ) {
+        row.columns[index].list[newIndex] = {
+          ...row.columns[index].list[newIndex],
+          options: {
+            ...row.columns[index].list[newIndex].options,
+            options: row.columns[index].list[
+              newIndex
+            ].options.options.map((ite: any) => ({ ...ite }))
+          }
+        }
+      }
+      updateSelectWidgetForm(row.columns[index].list[newIndex])
+    }
+
+    return {
+      widgetForm,
+      selectWidgetForm,
+      handleItemClick,
+      handleCopyClick,
+      handleDeleteClick,
+      handleColMoveAdd,
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/core/element/components/ElDraggableForm.vue b/src/core/element/components/ElDraggableForm.vue
new file mode 100644
index 0000000..c623b4d
--- /dev/null
+++ b/src/core/element/components/ElDraggableForm.vue
@@ -0,0 +1,100 @@
+<template>
+  <Draggable
+    :class="formClass"
+    item-key="key"
+    ghostClass="ghost"
+    handle=".drag-widget"
+    :animation="200"
+    :group="{ name: 'people' }"
+    :list="list"
+    @add="handleMoveAdd($event, layoutElement, colIndex)"
+  >
+    <template #item="{ element, index }">
+      <transition-group name="fade" tag="div">
+        <template v-if="islayoutComponent(element.type)">
+          <ElWidgetLayoutForm
+            v-if="element.key"
+            :key="element.key"
+            :element="element"
+            :index="index"
+            @click.stop="handleItemClick(element)"
+          />
+        </template>
+        <template v-else>
+          <ElWidgetFormItem
+            v-if="element.key"
+            :key="element.key"
+            :element="element"
+            @click.stop="handleItemClick(element)"
+            @copy="handleCopyClick(index, list)"
+            @delete="handleDeleteClick(index, list)"
+          />
+        </template>
+      </transition-group>
+    </template>
+  </Draggable>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue'
+import { islayoutComponent } from '@/config/element'
+import Draggable from 'vuedraggable'
+import ElWidgetFormItem from '@/core/element/ElWidgetFormItem.vue'
+
+export default defineComponent({
+  name: 'ElDraggableForm',
+  components: {
+    Draggable,
+    ElWidgetFormItem,
+    ElWidgetLayoutForm: defineAsyncComponent(() => import('@/core/element/ElWidgetLayoutForm.vue'))
+  },
+  props: {
+    list: {
+      type: Array,
+      required: true
+    },
+    layoutElement: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    colIndex: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    formClass: {
+      type: Array,
+      default() {
+        return ['widget-form-list']
+      }
+    }
+  },
+  emits: ['handleMoveAdd', 'handleItemClick', 'handleCopyClick', 'handleDeleteClick'],
+  setup(props, context) {
+    const handleMoveAdd = ($event:any, element:any, colIndex:number) => {
+      context.emit('handleMoveAdd', $event, element, colIndex)
+    }
+    const handleItemClick = (element:any) => {
+      context.emit('handleItemClick', element)
+    }
+    const handleCopyClick = (index:number, list:any) => {
+      context.emit('handleCopyClick', index, list)
+    }
+    const handleDeleteClick = (index:number, list:any) => {
+      context.emit('handleDeleteClick', index, list)
+    }
+    return {
+      handleMoveAdd,
+      handleItemClick,
+      handleCopyClick,
+      handleDeleteClick,
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
diff --git a/src/styles/index.styl b/src/styles/index.styl
index 220e20e..308e1e6 100644
--- a/src/styles/index.styl
+++ b/src/styles/index.styl
@@ -218,7 +218,7 @@ html, body
             font-size 14px
             color #fff
             margin 0 5px
-            cursor move
+            cursor pointer
         .widget-view-drag.widget-col-drag
           position absolute
           height 28px
diff --git a/src/utils/array.ts b/src/utils/array.ts
new file mode 100644
index 0000000..14b2e31
--- /dev/null
+++ b/src/utils/array.ts
@@ -0,0 +1,34 @@
+export function handleListInsert(key: string, list: any[], obj: any) {
+  const newList: any[] = []
+  list.forEach(item => {
+    if (item.key === key) {
+      newList.push(item)
+      newList.push(obj)
+    } else {
+      if (item.columns) {
+        item.columns = item.columns.map((col: any) => ({
+          ...col,
+          list: handleListInsert(key, col.list, obj)
+        }))
+      }
+      newList.push(item)
+    }
+  })
+  return newList
+}
+
+export function handleListDelete(key: string, list: any[]) {
+  const newList: any[] = []
+  list.forEach(item => {
+    if (item.key !== key) {
+      if (item.columns) {
+        item.columns = item.columns.map((col: any) => ({
+          ...col,
+          list: handleListDelete(key, col.list)
+        }))
+      }
+      newList.push(item)
+    }
+  })
+  return newList
+}
diff --git a/src/utils/makemap.ts b/src/utils/makemap.ts
new file mode 100644
index 0000000..68f2aed
--- /dev/null
+++ b/src/utils/makemap.ts
@@ -0,0 +1,9 @@
+export function makeComponentMap(
+  components: Array<any>
+): (key: string) => boolean {
+  const map: Record<string, boolean> = Object.create(null)
+  for (let i = 0; i < components.length; i++) {
+    map[components[i].type] = true
+  }
+  return val => !!map[val]
+}
diff --git a/tsconfig.json b/tsconfig.json
index a7acb93..e374eef 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
+    "noImplicitAny": false,
     "baseUrl": ".",
     "types": ["webpack-env"],
     "paths": {