diff --git a/dev_tools/formprops.js b/dev_tools/formprops.js
deleted file mode 100644
index 3231f9f..0000000
--- a/dev_tools/formprops.js
+++ /dev/null
@@ -1,391 +0,0 @@
-module.exports = {
-    labelCol: { span: 3, offset: 0 },
-    labelAlign: 'right',
-    layout: 'horizontal',
-    size: 'default',
-    schemas: [
-      {
-        key: '95b6f464a9604b238ef8722db5d4878c',
-        field: 'ziDuan16563',
-        label: '字段1',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: true,
-          respNewRow: false,
-          placeholder: '请输入字段1',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: 'd7f295f12d2a4ec7863099d875b95515',
-        field: 'ziDuan28273',
-        label: '字段2',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: true,
-          respNewRow: false,
-          placeholder: '请输入字段2',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: '37d86747f1e64aae874f13f29a5697f3',
-        field: 'ziDuan35193',
-        label: '字段3',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: true,
-          respNewRow: false,
-          placeholder: '请输入字段3',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          respBreakLine: true,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: 'fa04ee3d955a4659be18331be1819601',
-        field: 'ziDuan45516',
-        label: '字段4',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: true,
-          respNewRow: false,
-          placeholder: '请输入字段4',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: '9dcd8c7ac1e54acd8cee285274b82b0d',
-        field: 'ziDuan55031',
-        label: '字段5',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: false,
-          respNewRow: false,
-          placeholder: '请输入字段5',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: 'a4b8975a9b2f4fda84dbc88cdd2bcfb7',
-        field: 'jiLianBenTi7352',
-        label: '级联本体',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: true,
-          respNewRow: false,
-          placeholder: '请输入级联本体',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: 'a2e8519113f844c3a0ae489b2c8a09d0',
-        field: 'jiLianWenZi5194',
-        label: '级联文字',
-        type: 'input',
-        component: 'Input',
-        colProps: { span: 24 },
-        defaultValue: '',
-        componentProps: {
-          width: '100%',
-          span: '',
-          defaultValue: '',
-          labelWidthMode: 'fix',
-          labelFixWidth: 120,
-          responsive: false,
-          respNewRow: false,
-          placeholder: '请输入级联文字',
-          maxlength: null,
-          prefix: '',
-          suffix: '',
-          addonBefore: '',
-          addonAfter: '',
-          disabled: false,
-          allowClear: false,
-          showLabel: true,
-          required: false,
-          rules: [],
-          events: {},
-          isSave: false,
-          isShow: true,
-          scan: false,
-          style: { width: '100%' },
-        },
-      },
-      {
-        key: '506f9008790c4e72843910da7c36b2d8',
-        field: '',
-        label: '标题',
-        type: 'title',
-        component: 'Title',
-        colProps: { span: 24 },
-        defaultValue: '明细表',
-        componentProps: {
-          defaultValue: '明细表',
-          color: '',
-          align: 'left',
-          fontSize: 18,
-          isShow: true,
-          style: {},
-        },
-      },
-      {
-        key: '25a93adbfba647b2a5398221d2a35952',
-        label: '表格组件',
-        field: 'cascadeDemoChild5561List',
-        type: 'form',
-        component: 'SubForm',
-        required: true,
-        colProps: { span: 24 },
-        componentProps: {
-          mainKey: 'cascadeDemoChild5561List',
-          columns: [
-            {
-              key: 'af2057f5fa774ec29f91b2114c4af4f7',
-              title: '列1',
-              dataIndex: 'lie19747',
-              componentType: 'Input',
-              defaultValue: '',
-              componentProps: {
-                width: '100%',
-                span: '',
-                defaultValue: '',
-                labelWidthMode: 'fix',
-                labelFixWidth: 120,
-                responsive: false,
-                respNewRow: false,
-                placeholder: '请输入列1',
-                maxlength: null,
-                prefix: '',
-                suffix: '',
-                addonBefore: '',
-                addonAfter: '',
-                disabled: false,
-                allowClear: false,
-                showLabel: true,
-                required: false,
-                rules: [],
-                events: {},
-                isSave: false,
-                isShow: true,
-                scan: false,
-              },
-            },
-            {
-              key: 'd02e0e1df55249e6a42964143f2d2b48',
-              title: '级联本体',
-              dataIndex: 'jiLianBenTi9627',
-              componentType: 'Input',
-              defaultValue: '',
-              componentProps: {
-                width: '100%',
-                span: '',
-                defaultValue: '',
-                labelWidthMode: 'fix',
-                labelFixWidth: 120,
-                responsive: false,
-                respNewRow: false,
-                placeholder: '请输入级联本体',
-                maxlength: null,
-                prefix: '',
-                suffix: '',
-                addonBefore: '',
-                addonAfter: '',
-                disabled: false,
-                allowClear: false,
-                showLabel: true,
-                required: false,
-                rules: [],
-                events: {},
-                isSave: false,
-                isShow: true,
-                scan: false,
-              },
-            },
-            {
-              key: '07ea250f2eb84680a01692b078e1d1cc',
-              title: '级联文字',
-              dataIndex: 'jiLianWenZi9294',
-              componentType: 'Input',
-              defaultValue: '',
-              componentProps: {
-                width: '100%',
-                span: '',
-                defaultValue: '',
-                labelWidthMode: 'fix',
-                labelFixWidth: 120,
-                responsive: false,
-                respNewRow: false,
-                placeholder: '请输入级联文字',
-                maxlength: null,
-                prefix: '',
-                suffix: '',
-                addonBefore: '',
-                addonAfter: '',
-                disabled: false,
-                allowClear: false,
-                showLabel: true,
-                required: false,
-                rules: [],
-                events: {},
-                isSave: false,
-                isShow: true,
-                scan: false,
-              },
-            },
-            { title: '操作', key: 'action', fixed: 'right', width: '50px' },
-          ],
-          span: '24',
-          preloadType: 'api',
-          apiConfig: {},
-          itemId: '',
-          dicOptions: [],
-          useSelectButton: false,
-          buttonName: '选择数据',
-          showLabel: false,
-          showComponentBorder: true,
-          showFormBorder: true,
-          showIndex: false,
-          isShow: true,
-          multipleHeads: [],
-        },
-      },
-    ],
-    showActionButtonGroup: false,
-    buttonLocation: 'center',
-    actionColOptions: { span: 24 },
-    showResetButton: false,
-    showSubmitButton: false,
-    hiddenComponent: [],
-  };
\ No newline at end of file
diff --git a/dev_tools/template_extend.js b/dev_tools/template_extend.js
index d46841a..89ac59a 100644
--- a/dev_tools/template_extend.js
+++ b/dev_tools/template_extend.js
@@ -1,6 +1,10 @@
 const fs = require('fs');
 const path = require('path');
 const filePath = path.join(process.cwd(), 'config.ts');
+const argv = process.argv;
+const fixResponsive = argv.indexOf('fix-responsive') > 0;
+const templates = require('./templates');
+
 if (fs.existsSync(filePath)) {
     console.log('Reading ' + filePath);
     const file = fs.readFileSync(filePath, 'utf-8');
@@ -31,7 +35,10 @@ if (fs.existsSync(filePath)) {
 
 let tmpl = '';
 let tabCount = 0;
+let tableCount = 0;
 const refList = [];
+const importList = [];
+const components = [];
 
 // 用于将config的表单格式展开成字段，以便二开
 formProps.schemas.forEach((prop) => {
@@ -41,6 +48,7 @@ formProps.schemas.forEach((prop) => {
 function appendTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
     // 栅格布局
+    tmpl += `<!-- ${prop.label || prop.field || prop.component}  -->\n`;
     if (prop.component == 'Grid') {
         prop.children.forEach((child) => {
             child.list.forEach((listChild) => {
@@ -54,9 +62,10 @@ function appendTmpl(prop) {
         appendTableLayoutTmpl(prop);
     } else if (prop.component == 'Card') {
         appendCardTmpl(prop);
+    } else if (prop.component == 'SubForm') {
+        return appendSubFormTmpl(prop);
     }
     tmpl += `
-    <!-- ${prop.label || prop.field || prop.component}  -->
     <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
         <template v-if="showComponent(${schema})">
             <SimpleFormItem v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
@@ -65,6 +74,34 @@ function appendTmpl(prop) {
     `;
 }
 
+function appendSubFormTmpl(prop){
+    let schema = `schemaMap['${prop.key}']`;
+    tableCount += 1;
+    createSubFormFile();
+    tmpl += `
+    <Col v-if="getIfShow2('${prop.key}')" v-show="getIsShow2('${prop.key}')" :span="getColWidth(${schema})">
+        <template v-if="showComponent(${schema})">
+            <CustomDevTableItem${tableCount} v-model:value="formModel[${schema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${schema}" />
+        </template>
+    </Col>
+    `
+    importList.push(`import CustomDevTableItem${tableCount} from './CustomDevTableItem${tableCount}.vue';`);
+    components.push(`CustomDevTableItem${tableCount}`);
+}
+
+function createSubFormFile(){
+    const subFormStr = templates.subFormTmpl;
+    fs.writeFile(`./CustomDevSubForm${tableCount}.vue`, subFormStr, (err) => {
+        if (err) throw err;
+        console.log(`Write SubForm CustomDevSubForm${tabCount}.vue success`);
+    });
+    const formItemStr = templates.subFormItem.replace('[count]', tableCount);
+    fs.writeFile(`./CustomDevTableItem${tableCount}.vue`, formItemStr, (err) => {
+        if (err) throw err;
+        console.log(`Write FormItem CustomDevTableItem${tabCount}.vue success`);
+    });
+}
+
 function appendTabTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
     tabCount += 1;
@@ -82,28 +119,28 @@ function appendTabTmpl(prop) {
 
 function appendTableLayoutTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
-    tmpl += `<TableLayoutPreview :element="${schema}">`;
-    tmpl += `   <template #tdElement="{ tdElement }">`;
-    tmpl += `        <div class="h-full">`;
-    tmpl += `<div style="getTdStyle(tdElement)">`;
-    prop.children.forEach((child) => {
-        let childSchema = `schemaMap['${child.key}']`;
-        tmpl += `<SimpleFormItem v-if="getIfShow2(${childSchema})" v-show="getIsShow2(${childSchema})" v-model:value="formModel[${childSchema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${childSchema}" />`;
+    tmpl += `<TableLayoutPreview :element="${schema}">\n`;
+    tmpl += `   <template #tdElement="{ tdElement }">\n`;
+    tmpl += `        <div class="h-full">\n`;
+    tmpl += `<div :style="getTdStyle(tdElement)">\n`;
+    prop.children[0].list.forEach((lChild) => {
+        lChild.children.forEach((child) => {
+            appendTmpl(child);
+        });
     });
-    tmpl += `</div>`;
-    tmpl += `        </div>`;
-    tmpl += `    </template>`;
-    tmpl += `</TableLayoutPreview>`;
+    tmpl += `</div>\n`;
+    tmpl += `        </div>\n`;
+    tmpl += `    </template>\n`;
+    tmpl += `</TableLayoutPreview>\n`;
 }
 
 function appendCardTmpl(prop) {
     let schema = `schemaMap['${prop.key}']`;
-    tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">`;
+    tmpl += `<CollapseContainer :bordered="false" :hasLeftBorder="true" title="${prop.componentProps.title}">\n`;
     prop.children[0].list.forEach((lChild) => {
-        const childSchema = `schemaMap['${lChild.key}']`;
-        tmpl += ` <SimpleFormItem v-model:value="formModel[${childSchema}.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="${childSchema}" />`;
+        appendTmpl(lChild);
     });
-    tmpl += `</CollapseContainer>`;
+    tmpl += `</CollapseContainer>\n`;
 }
 
 const fullVue = `
@@ -132,11 +169,20 @@ const fullVue = `
     import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
     import { ref } from 'vue';
     import { CheckCircleOutlined } from '@ant-design/icons-vue';
+    ${importList.join('\n')}
 
     const FormItem = Form.Item;
 
     export default {
-        components: { CheckCircleOutlined, Form, Col, SimpleFormItem, Row, FormItem },
+        components: { 
+            CheckCircleOutlined, 
+            Form, 
+            Col, 
+            SimpleFormItem, 
+            Row, 
+            FormItem,
+            ${components.join('\n')} 
+        },
         mixins: [SimpleFormSetup],
         setup(props, ctx) {
             const ret = SimpleFormSetup.setup(props, ctx);
@@ -200,7 +246,7 @@ const fullVue = `
 </script>
 `;
 
-fs.writeFile('./template.vue', fullVue, (err) => {
+fs.writeFile('./CustomDevForm.vue', fullVue, (err) => {
     if (err) throw err;
     console.log('The file has been saved!');
 });
diff --git a/dev_tools/templates.js b/dev_tools/templates.js
new file mode 100644
index 0000000..7717f8f
--- /dev/null
+++ b/dev_tools/templates.js
@@ -0,0 +1,156 @@
+const subFormTmpl = `
+<template>
+    <div class="form-detail-table">
+        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
+            <template #summary>
+                <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
+                    <a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
+                        <a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex])) }}</a-typography-text>
+                    </a-table-summary-cell>
+                </a-table-summary-row>
+            </template>
+            <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key !== 'action'">
+                    <template v-if="column.key === 'index'">
+                        {{ index + 1 }}
+                    </template>
+                    <FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
+                        <!---如果是checked一类的组件-->
+                        <template v-if="checkedValueComponents.includes(column.componentType)">
+                            <component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
+                        </template>
+                        <!---如果是RangePicker组件-->
+                        <template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:endField="column.dataIndex.split(',')[1]"
+                                v-model:startField="column.dataIndex.split(',')[0]"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :mainKey="mainKey"
+                                :tableIndex="index"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @change="handleRangePickerChange(record, column.dataIndex)"
+                            />
+                        </template>
+
+                        <!---如果是渲染函数组件-->
+                        <template v-else-if="column.componentType === 'Render'">
+                            <component
+                                :is="
+                                    column.render({
+                                        model: record,
+                                        field: column.dataIndex,
+                                        rules: column.rules,
+                                        componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
+                                    })
+                                "
+                                :bordered="showComponentBorder"
+                            />
+                        </template>
+
+                        <template v-else-if="column.key !== 'index'">
+                            <component
+                                :is="componentMap.get(column.componentType)"
+                                v-model:value="record[column.dataIndex]"
+                                :bordered="showComponentBorder"
+                                :index="index"
+                                :mainKey="mainKey"
+                                :key="column.dataIndex + record['_key_']"
+                                :row="record"
+                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
+                                @blur="onFieldBlur(column, record, index)"
+                                @change="onFieldChange(column, record, index)"
+                            />
+                        </template>
+                    </FormItem>
+                </template>
+                <template v-if="column.key === 'action' && !disabled">
+                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
+                </template>
+            </template>
+        </a-table>
+
+        <div class="tbl-toolbar">
+            <a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
+                {{ buttonName }}
+            </a-button>
+            <a-button v-if="!disabled && !disableAddRow && useAddButton" type="primary" @click="add">
+                <PlusOutlined />
+                {{ t('新增') }}
+            </a-button>
+        </div>
+
+        <FormItemRest>
+            <MultipleSelect
+                ref="MultipleSelectRef"
+                v-model:multipleDialog="multipleDialog"
+                :apiConfig="apiConfig"
+                :datasourceType="preloadType"
+                :dicOptions="dicOptions"
+                :isSubFormUse="true"
+                :params="{ itemId }"
+                popupType="preload"
+                @submit="renderSubFormList"
+            />
+        </FormItemRest>
+    </div>
+</template>
+
+<script>
+    import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
+
+    export default {
+        extends: SubFormV2Setup,
+        setup(props, ctx) {
+            const ret = SubFormV2Setup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+`;
+
+const subFormItem = `
+<template>
+    <!-- formitem的标题一般不用，如果不需要控制明细表的权限显隐，这个formitem可以去掉，或者用div代替 -->
+    <FormItem
+        v-if="getShow(schema)"
+        v-show="getIsShow(schema)"
+        :key="schema.key"
+        :label="getComponentsProps.showLabel ? schema.label : ''"
+        :label-col="labelCol"
+        :labelAlign="formProps?.labelAlign"
+        :name="schema.field"
+        :wrapperCol="itemLabelWidthProp.wrapperCol"
+    >
+        <!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
+        <!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
+        <custom-dev-form v-model:value="formModel[schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
+    </FormItem>
+</template>
+
+<script>
+    import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
+    import CustomDevSubForm from '/@/views/test/cascadeDemo/components/CascadeDetailTable[count].vue';
+
+    export default {
+        extends: SimpleFormItemSetup,
+        components: {
+            CustomDevSubForm
+        },
+        setup(props, ctx) {
+            const ret = SimpleFormItemSetup.setup(props, ctx);
+            return {
+                ...ret
+            };
+        }
+    };
+</script>
+`;
+
+module.exports = {
+    subFormTmpl,
+    subFormItem
+}