From fa75a27a49b672bb60e4d86dad15f01e9ea44ef5 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Tue, 5 Oct 2021 17:39:06 +0800
Subject: [PATCH] =?UTF-8?q?form=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/api/form.ts             |  34 +-
 examples/api/grid.ts             |  12 +-
 examples/api/table.ts            |   4 +-
 examples/views/form/Form.vue     | 978 ++++++++++++++++---------------
 examples/views/start/Theme.vue   |  17 +-
 helper/vetur/attributes.json     |   8 +
 helper/vetur/tags.json           |   2 +
 package.json                     |   6 +-
 packages/form/src/form-gather.ts |  18 +-
 packages/form/src/form-item.ts   | 112 +++-
 packages/form/src/form.ts        | 161 ++---
 packages/form/src/render.ts      |  79 +++
 packages/grid/src/grid.ts        |   6 +-
 packages/table/src/body.ts       |  15 +-
 packages/table/src/table.ts      |   4 +-
 packages/tools/dom.ts            |   5 +-
 styles/variable.scss             | 384 ++++++------
 types/form.d.ts                  |  42 +-
 types/grid.d.ts                  |   9 +-
 19 files changed, 1093 insertions(+), 803 deletions(-)
 create mode 100644 packages/form/src/render.ts

diff --git a/examples/api/form.ts b/examples/api/form.ts
index 406056cf8..feecd9786 100644
--- a/examples/api/form.ts
+++ b/examples/api/form.ts
@@ -113,6 +113,24 @@ const apis = [
         defVal: '',
         list: []
       },
+      {
+        name: 'collapse-status',
+        desc: 'v-model 绑定值，折叠状态',
+        version: '4.0.29',
+        type: 'boolean',
+        enum: '',
+        defVal: 'true',
+        list: []
+      },
+      {
+        name: 'custom-layout',
+        desc: '是否使用自定义布局',
+        version: '4.0.29',
+        type: 'boolean',
+        enum: '',
+        defVal: '默认 false，继承 setup.form.customLayout',
+        list: []
+      },
       {
         name: 'items',
         desc: '项列表',
@@ -308,11 +326,21 @@ const apis = [
       },
       {
         name: 'toggle-collapse',
-        desc: '当折叠按钮被手动点击时会触发该事件',
+        desc: '即将废弃，请使用 collapse',
+        disabled: true,
         version: '',
         type: '',
         enum: '',
-        defVal: '{ collapse, data, $event }',
+        defVal: '{ status, data, $event }',
+        list: []
+      },
+      {
+        name: 'collapse',
+        desc: '当折叠按钮被手动点击时会触发该事件',
+        version: '4.0.29',
+        type: '',
+        enum: '',
+        defVal: '{ status, data, $event }',
         list: []
       }
     ]
@@ -372,7 +400,7 @@ const apis = [
       },
       {
         name: 'toggleCollapse()',
-        desc: '手动切换折叠状态',
+        desc: '只对 collapse-node 有效，手动切换折叠状态',
         version: '',
         type: 'Promise',
         enum: '',
diff --git a/examples/api/grid.ts b/examples/api/grid.ts
index 425d60954..5ec2baf3b 100644
--- a/examples/api/grid.ts
+++ b/examples/api/grid.ts
@@ -500,11 +500,21 @@ const apis = [
       },
       {
         name: 'form-toggle-collapse',
+        desc: '即将废弃，请使用 form-collapse',
+        disabled: true,
+        version: '',
+        type: '',
+        enum: '',
+        defVal: '{ status, data, $event }',
+        list: []
+      },
+      {
+        name: 'form-collapse',
         desc: '只对 form-config 配置时有效，当折叠按钮被手动点击时会触发该事件',
         version: '',
         type: '',
         enum: '',
-        defVal: '{ collapse, data, $event }',
+        defVal: '{ status, data, $event }',
         list: []
       },
       {
diff --git a/examples/api/table.ts b/examples/api/table.ts
index 82c84e42c..8d5bcff97 100644
--- a/examples/api/table.ts
+++ b/examples/api/table.ts
@@ -3151,7 +3151,7 @@ const apis = [
         version: '',
         type: '',
         enum: '',
-        defVal: '{ type, scrollTop, scrollLeft, isX, isY, $event }',
+        defVal: '{ type, scrollTop, scrollLeft, bodyWidth, bodyHeight, isX, isY, $event }',
         list: []
       },
       {
@@ -3449,7 +3449,7 @@ const apis = [
         version: '',
         type: 'Promise<{row, rows}>',
         enum: '',
-        defVal: 'records: object | Array<object>, row?: Row',
+        defVal: 'records: object | Array<object>, row?: Row | -1 | 0',
         list: []
       },
       {
diff --git a/examples/views/form/Form.vue b/examples/views/form/Form.vue
index e31ef2b3b..53cd2e79a 100644
--- a/examples/views/form/Form.vue
+++ b/examples/views/form/Form.vue
@@ -3,184 +3,196 @@
     <h2>{{ $t('app.aside.nav.form') }}</h2>
     <p class="tip">
       表单，查看 <router-link class="link" :to="{name: 'VXEAPI', params: {name: 'form'}}">API</router-link>，可以通过 <router-link class="link" :to="{name: 'StartGlobal'}">setup</router-link> 设置全局参数<br>
-      <span class="red">（注：重置功能需要配置 item-render 的项有效，如果不需要自动重置，可以不用设置）</span>
+      默认渲染方式为配置式，不支持自定义的布局，可以通过设置 custom-layout 切换为自定义布局<br>
+      <span class="red">（注：重置功能只对配置 item-render 的项有效）</span>
     </p>
 
-    <p>
-      <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
-        <vxe-form-item title="名称" field="name" :item-render="{}">
+    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
+      <vxe-form-item title="名称" field="name" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="性别" field="sex" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+            <vxe-option value="1" label="女"></vxe-option>
+            <vxe-option value="2" label="男"></vxe-option>
+          </vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item>
+        <template #default>
+          <vxe-button type="submit" status="primary" content="默认尺寸"></vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
+      <vxe-form-item title="名称" field="name" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="性别" field="sex" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+            <vxe-option value="1" label="女"></vxe-option>
+            <vxe-option value="2" label="男"></vxe-option>
+          </vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item>
+        <template #default>
+          <vxe-button type="submit" status="primary" content="中等尺寸"></vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="small">
+      <vxe-form-item title="名称" field="name" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="性别" field="sex" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+            <vxe-option value="1" label="女"></vxe-option>
+            <vxe-option value="2" label="男"></vxe-option>
+          </vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item>
+        <template #default>
+          <vxe-button type="submit" status="primary" content="小型尺寸"></vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+    <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
+      <vxe-form-item title="名称" field="name" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="性别" field="sex" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+            <vxe-option value="1" label="女"></vxe-option>
+            <vxe-option value="2" label="男"></vxe-option>
+          </vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item>
+        <template #default>
+          <vxe-button type="submit" status="primary" content="超小尺寸"></vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="html">{{ demoCodes[0] }}</pre-code>
+      <pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
+    </pre>
+
+    <vxe-form
+      title-colon
+      ref="xForm"
+      title-align="right"
+      title-width="100"
+      :data="demo2.formData2"
+      :rules="demo2.formRules2"
+      :loading="demo2.loading2"
+      @submit="submitEvent2"
+      @reset="resetEvent">
+      <vxe-form-gather span="12">
+        <vxe-form-item title="名称" field="name" span="24"></vxe-form-item>
+        <vxe-form-item title="昵称" span="24">
+          <template #title>
+            <span style="color: red;">自定义标题</span>
+          </template>
           <template #default="{ data }">
-            <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            <span>自定义 {{ data.nickname }}</span>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="性别" field="sex" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+        <vxe-form-item title="标题貌似有点长呢" field="sex" span="24" :item-render="{}" title-overflow>
+          <template #default="params">
+            <vxe-select v-model="params.data.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(params)">
               <vxe-option value="1" label="女"></vxe-option>
               <vxe-option value="2" label="男"></vxe-option>
             </vxe-select>
           </template>
         </vxe-form-item>
-        <vxe-form-item>
-          <template #default>
-            <vxe-button type="submit" status="primary" content="默认尺寸"></vxe-button>
+        <vxe-form-item title="标题貌似有点长呢" field="age" span="24" :item-render="{autofocus:'input'}" title-overflow="title">
+          <template #default="params">
+            <vxe-input v-model="params.data.age" type="integer" placeholder="请输入年龄" clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
           </template>
         </vxe-form-item>
-      </vxe-form>
-
-      <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
-        <vxe-form-item title="名称" field="name" :item-render="{}">
+        <vxe-form-item title="标题貌似有点长呢" field="date" span="24" :item-render="{}" title-overflow="ellipsis">
           <template #default="{ data }">
-            <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+      </vxe-form-gather>
+      <vxe-form-gather span="12">
+        <vxe-form-item title="标题貌似有点长呢标题貌似有点长呢" field="address" span="24" :item-render="{}">
+          <template #default="{ data }">
+            <vxe-textarea v-model="data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable></vxe-textarea>
+          </template>
+        </vxe-form-item>
+      </vxe-form-gather>
+      <vxe-form-item align="center" span="24">
+        <template #default>
+          <vxe-button type="submit" status="primary" content="基本表单"></vxe-button>
+          <vxe-button type="reset" content="重置"></vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="html">{{ demoCodes[2] }}</pre-code>
+      <pre-code class="typescript">{{ demoCodes[3] }}</pre-code>
+    </pre>
+
+    <vxe-form v-model:collapseStatus="demo3.collapseStatus3" :data="demo3.formData3" title-align="right" title-width="100" prevent-submit title-colon custom-layout>
+      <div style="color: red;">使用自定义布局</div>
+      <vxe-form-item title="名称" field="name" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+        </template>
+      </vxe-form-item>
+      <div style="border: 1px dashed green;padding: 10px;">
+        <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-exclamation-circle' }">
           <template #default="{ data }">
             <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="性别" field="sex" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-              <vxe-option value="1" label="女"></vxe-option>
-              <vxe-option value="2" label="男"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item>
-          <template #default>
-            <vxe-button type="submit" status="primary" content="中等尺寸"></vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-
-      <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="small">
-        <vxe-form-item title="名称" field="name" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="性别" field="sex" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-              <vxe-option value="1" label="女"></vxe-option>
-              <vxe-option value="2" label="男"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item>
-          <template #default>
-            <vxe-button type="submit" status="primary" content="小型尺寸"></vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-
-      <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
-        <vxe-form-item title="名称" field="name" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="性别" field="sex" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-              <vxe-option value="1" label="女"></vxe-option>
-              <vxe-option value="2" label="男"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item>
-          <template #default>
-            <vxe-button type="submit" status="primary" content="超小尺寸"></vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-    </p>
-
-    <p>
-      <vxe-form
-        title-colon
-        ref="xForm"
-        title-align="right"
-        title-width="100"
-        :data="demo2.formData2"
-        :rules="demo2.formRules2"
-        :loading="demo2.loading2"
-        @submit="submitEvent2"
-        @reset="resetEvent">
-        <vxe-form-gather span="12">
-          <vxe-form-item title="名称" field="name" span="24"></vxe-form-item>
-          <vxe-form-item title="昵称" span="24">
-            <template #title>
-              <span style="color: red;">自定义标题</span>
-            </template>
-            <template #default="{ data }">
-              <span>自定义 {{ data.nickname }}</span>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item title="标题貌似有点长呢" field="sex" span="24" :item-render="{}" title-overflow>
-            <template #default="params">
-              <vxe-select v-model="params.data.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(params)">
-                <vxe-option value="1" label="女"></vxe-option>
-                <vxe-option value="2" label="男"></vxe-option>
-              </vxe-select>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item title="标题貌似有点长呢" field="age" span="24" :item-render="{}" title-overflow="title">
-            <template #default="params">
-              <vxe-input v-model="params.data.age" type="integer" placeholder="请输入年龄" clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
-            </template>
-          </vxe-form-item>
-          <vxe-form-item title="标题貌似有点长呢" field="date" span="24" :item-render="{}" title-overflow="ellipsis">
-            <template #default="{ data }">
-              <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
-            </template>
-          </vxe-form-item>
-        </vxe-form-gather>
-        <vxe-form-gather span="12">
-          <vxe-form-item title="标题貌似有点长呢标题貌似有点长呢" field="address" span="24" :item-render="{}">
-            <template #default="{ data }">
-              <vxe-textarea v-model="data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable></vxe-textarea>
-            </template>
-          </vxe-form-item>
-        </vxe-form-gather>
-        <vxe-form-item align="center" span="24">
-          <template #default>
-            <vxe-button type="submit" status="primary" content="基本表单"></vxe-button>
-            <vxe-button type="reset" content="重置"></vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-    </p>
-
-    <p>
-      <vxe-form :data="demo3.formData3" title-align="right" title-width="100" prevent-submit title-colon>
-        <vxe-form-item title="名称" field="name" span="8" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="昵称" field="nickname" span="8" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-exclamation-circle' }">
-          <template #default="{ data }">
-            <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="性别" field="sex" span="8" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-thumbs-up' }" :title-suffix="{ message: '右边图标', icon: 'fa fa-mars-stroke' }">
+        <vxe-form-item title="性别" field="sex" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-thumbs-up' }" :title-suffix="{ message: '右边图标', icon: 'fa fa-mars-stroke' }">
           <template #title>
             <span style="color: red;">标题</span>
           </template>
@@ -191,43 +203,25 @@
             </vxe-select>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="年龄" field="age" span="8" :item-render="{}" :title-suffix="{ message: '右边图标', icon: 'fa fa-info-circle' }">
+        <vxe-form-item title="年龄" field="age" :item-render="{}" :title-suffix="{ message: '右边图标', icon: 'fa fa-info-circle' }">
           <template #default="{ data }">
             <vxe-input v-model="data.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="状态" field="status" span="8" :item-render="{}">
-          <template #default="{ data }">
-            <vxe-select v-model="data.status" placeholder="请选择状态" clearable>
-              <vxe-option value="0" label="失败"></vxe-option>
-              <vxe-option value="1" label="成功"></vxe-option>
-            </vxe-select>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="是否禁用" field="active" span="8" :item-render="{}">
+        <vxe-form-item title="是否禁用" field="active" :item-render="{}">
           <template #default="{ data }">
             <vxe-switch v-model="data.active" open-label="是" close-label="否"></vxe-switch>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="体重" field="weight" span="8" :item-render="{}" folding>
-          <template #default="{ data }">
-            <vxe-input v-model="data.weight" type="number" placeholder="请输入体重" clearable></vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="日期" field="date" span="8" :item-render="{}" folding>
+        <div>
+          <vxe-checkbox v-model="demo3.collapseStatus3" content="查看更多" :checked-value="false" :unchecked-value="true"></vxe-checkbox>
+        </div>
+        <vxe-form-item title="日期" field="date" :item-render="{}" folding>
           <template #default="{ data }">
             <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
           </template>
         </vxe-form-item>
-        <vxe-form-item title="是否单身" field="single" :item-render="{}" span="8" folding>
-          <template #default="{ data }">
-            <vxe-radio-group v-model="data.single">
-              <vxe-radio label="1" content="是"></vxe-radio>
-              <vxe-radio label="0" content="否"></vxe-radio>
-            </vxe-radio-group>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="兴趣爱好" field="flagList" :item-render="{}" span="8" folding>
+        <vxe-form-item title="兴趣爱好" field="flagList" :item-render="{}" folding>
           <template #default="{ data }">
             <vxe-checkbox-group v-model="data.flagList">
               <vxe-checkbox label="1" content="爬山"></vxe-checkbox>
@@ -236,22 +230,36 @@
             </vxe-checkbox-group>
           </template>
         </vxe-form-item>
-        <vxe-form-item align="center" span="24" collapse-node>
-          <template #default>
-            <vxe-button status="primary" content="手动提交方式" @click="searchEvent"></vxe-button>
-            <vxe-button content="重置" @click="resetEvent"></vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-    </p>
+        <div>
+          <vxe-form-item align="center" collapse-node>
+            <template #default>
+              <vxe-button status="primary" content="手动提交方式" @click="searchEvent"></vxe-button>
+              <vxe-button content="重置" @click="resetEvent"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </div>
+      </div>
+    </vxe-form>
 
-    <p>
-      <vxe-form :data="demo4.formData4" :items="demo4.formItems4">
-        <template #myregion="{ data }">
-          <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
-        </template>
-      </vxe-form>
-    </p>
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="html">{{ demoCodes[4] }}</pre-code>
+      <pre-code class="typescript">{{ demoCodes[5] }}</pre-code>
+    </pre>
+
+    <vxe-form :data="demo4.formData4" :items="demo4.formItems4">
+      <template #myregion="{ data }">
+        <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
+      </template>
+    </vxe-form>
+
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="html">{{ demoCodes[6] }}</pre-code>
+      <pre-code class="typescript">{{ demoCodes[7] }}</pre-code>
+    </pre>
 
     <pre>
       <pre-code>
@@ -260,13 +268,6 @@
         | Enter | （prevent-submit=true时）如果有存在提交按钮则回车后自动提交表单 |
       </pre-code>
     </pre>
-
-    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
-
-    <pre>
-      <pre-code class="html">{{ demoCodes[0] }}</pre-code>
-      <pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
-    </pre>
   </div>
 </template>
 
@@ -313,11 +314,15 @@ export default defineComponent({
               }
             }
           }
+        ],
+        date: [
+          { required: true, message: '必填校验' }
         ]
       } as VxeFormPropTypes.Rules
     })
 
     const demo3 = reactive({
+      collapseStatus3: true,
       formData3: {
         name: '',
         nickname: '',
@@ -397,256 +402,112 @@ export default defineComponent({
       resetEvent,
       demoCodes: [
         `
-        <p>
-          <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
-            <vxe-form-item title="名称" field="name" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="性别" field="sex" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-                  <vxe-option value="1" label="女"></vxe-option>
-                  <vxe-option value="2" label="男"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item>
-              <template #default>
-                <vxe-button type="submit" status="primary" content="默认尺寸"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-
-          <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
-            <vxe-form-item title="名称" field="name" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="性别" field="sex" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-                  <vxe-option value="1" label="女"></vxe-option>
-                  <vxe-option value="2" label="男"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item>
-              <template #default>
-                <vxe-button type="submit" status="primary" content="中等尺寸"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-
-          <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="small">
-            <vxe-form-item title="名称" field="name" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="性别" field="sex" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-                  <vxe-option value="1" label="女"></vxe-option>
-                  <vxe-option value="2" label="男"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item>
-              <template #default>
-                <vxe-button type="submit" status="primary" content="小型尺寸"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-
-          <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
-            <vxe-form-item title="名称" field="name" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="昵称" field="nickname" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="性别" field="sex" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-                  <vxe-option value="1" label="女"></vxe-option>
-                  <vxe-option value="2" label="男"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item>
-              <template #default>
-                <vxe-button type="submit" status="primary" content="超小尺寸"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form
-            title-colon
-            ref="xForm"
-            title-align="right"
-            title-width="100"
-            :data="demo2.formData2"
-            :rules="demo2.formRules2"
-            :loading="demo2.loading2"
-            @submit="submitEvent2"
-            @reset="resetEvent">
-            <vxe-form-gather span="12">
-              <vxe-form-item title="名称" field="name" span="24"></vxe-form-item>
-              <vxe-form-item title="昵称" span="24">
-                <template #title>
-                  <span style="color: red;">自定义标题</span>
-                </template>
-                <template #default="{ data }">
-                  <span>自定义 {{ data.nickname }}</span>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="标题貌似有点长呢" field="sex" span="24" :item-render="{}" title-overflow>
-                <template #default="params">
-                  <vxe-select v-model="params.data.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(params)">
-                    <vxe-option value="1" label="女"></vxe-option>
-                    <vxe-option value="2" label="男"></vxe-option>
-                  </vxe-select>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="标题貌似有点长呢" field="age" span="24" :item-render="{}" title-overflow="title">
-                <template #default="params">
-                  <vxe-input v-model="params.data.age" type="integer" placeholder="请输入年龄" clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="标题貌似有点长呢" field="date" span="24" :item-render="{}" title-overflow="ellipsis">
-                <template #default="{ data }">
-                  <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
-                </template>
-              </vxe-form-item>
-            </vxe-form-gather>
-            <vxe-form-gather span="12">
-              <vxe-form-item title="标题貌似有点长呢标题貌似有点长呢" field="address" span="24" :item-render="{}">
-                <template #default="{ data }">
-                  <vxe-textarea v-model="data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable></vxe-textarea>
-                </template>
-              </vxe-form-item>
-            </vxe-form-gather>
-            <vxe-form-item align="center" span="24">
-              <template #default>
-                <vxe-button type="submit" status="primary" content="基本表单"></vxe-button>
-                <vxe-button type="reset" content="重置"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form :data="demo3.formData3" title-align="right" title-width="100" prevent-submit title-colon>
-            <vxe-form-item title="名称" field="name" span="8" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="昵称" field="nickname" span="8" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-exclamation-circle' }">
-              <template #default="{ data }">
-                <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="性别" field="sex" span="8" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-thumbs-up' }" :title-suffix="{ message: '右边图标', icon: 'fa fa-mars-stroke' }">
-              <template #title>
-                <span style="color: red;">标题</span>
-              </template>
-              <template #default="{ data }">
-                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
-                  <vxe-option value="1" label="女"></vxe-option>
-                  <vxe-option value="2" label="男"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="年龄" field="age" span="8" :item-render="{}" :title-suffix="{ message: '右边图标', icon: 'fa fa-info-circle' }">
-              <template #default="{ data }">
-                <vxe-input v-model="data.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="状态" field="status" span="8" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-select v-model="data.status" placeholder="请选择状态" clearable>
-                  <vxe-option value="0" label="失败"></vxe-option>
-                  <vxe-option value="1" label="成功"></vxe-option>
-                </vxe-select>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="是否禁用" field="active" span="8" :item-render="{}">
-              <template #default="{ data }">
-                <vxe-switch v-model="data.active" open-label="是" close-label="否"></vxe-switch>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="体重" field="weight" span="8" :item-render="{}" folding>
-              <template #default="{ data }">
-                <vxe-input v-model="data.weight" type="number" placeholder="请输入体重" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="日期" field="date" span="8" :item-render="{}" folding>
-              <template #default="{ data }">
-                <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="是否单身" field="single" :item-render="{}" span="8" folding>
-              <template #default="{ data }">
-                <vxe-radio-group v-model="data.single">
-                  <vxe-radio label="1" content="是"></vxe-radio>
-                  <vxe-radio label="0" content="否"></vxe-radio>
-                </vxe-radio-group>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="兴趣爱好" field="flagList" :item-render="{}" span="8" folding>
-              <template #default="{ data }">
-                <vxe-checkbox-group v-model="data.flagList">
-                  <vxe-checkbox label="1" content="爬山"></vxe-checkbox>
-                  <vxe-checkbox label="2" content="跑步"></vxe-checkbox>
-                  <vxe-checkbox label="3" content="听歌"></vxe-checkbox>
-                </vxe-checkbox-group>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item align="center" span="24" collapse-node>
-              <template #default>
-                <vxe-button status="primary" content="手动提交方式" @click="searchEvent"></vxe-button>
-                <vxe-button content="重置" @click="resetEvent"></vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form :data="demo4.formData4" :items="demo4.formItems4">
-            <template #myregion="{ data }">
-              <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
+        <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent">
+          <vxe-form-item title="名称" field="name" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
             </template>
-          </vxe-form>
-        </p>
+          </vxe-form-item>
+          <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.nickname" placeholder="请输入昵称"></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="性别" field="sex" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+                <vxe-option value="1" label="女"></vxe-option>
+                <vxe-option value="2" label="男"></vxe-option>
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item>
+            <template #default>
+              <vxe-button type="submit" status="primary" content="默认尺寸"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+
+        <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="medium">
+          <vxe-form-item title="名称" field="name" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="性别" field="sex" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+                <vxe-option value="1" label="女"></vxe-option>
+                <vxe-option value="2" label="男"></vxe-option>
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item>
+            <template #default>
+              <vxe-button type="submit" status="primary" content="中等尺寸"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+
+        <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="small">
+          <vxe-form-item title="名称" field="name" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="性别" field="sex" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+                <vxe-option value="1" label="女"></vxe-option>
+                <vxe-option value="2" label="男"></vxe-option>
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item>
+            <template #default>
+              <vxe-button type="submit" status="primary" content="小型尺寸"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+
+        <vxe-form :data="demo1.formData1" @submit="searchEvent" @reset="resetEvent" size="mini">
+          <vxe-form-item title="名称" field="name" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="昵称" field="nickname" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item title="性别" field="sex" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+                <vxe-option value="1" label="女"></vxe-option>
+                <vxe-option value="2" label="男"></vxe-option>
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item>
+            <template #default>
+              <vxe-button type="submit" status="primary" content="超小尺寸"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
         `,
         `
         import { defineComponent, reactive } from 'vue'
-        import { VXETable, VxeFormEvents } from 'vxe-table'
 
         export default defineComponent({
           setup  () {
@@ -657,7 +518,73 @@ export default defineComponent({
                 sex: '1'
               }
             })
+            return {
+              demo1
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form
+          title-colon
+          ref="xForm"
+          title-align="right"
+          title-width="100"
+          :data="demo2.formData2"
+          :rules="demo2.formRules2"
+          :loading="demo2.loading2"
+          @submit="submitEvent2"
+          @reset="resetEvent">
+          <vxe-form-gather span="12">
+            <vxe-form-item title="名称" field="name" span="24"></vxe-form-item>
+            <vxe-form-item title="昵称" span="24">
+              <template #title>
+                <span style="color: red;">自定义标题</span>
+              </template>
+              <template #default="{ data }">
+                <span>自定义 {{ data.nickname }}</span>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="标题貌似有点长呢" field="sex" span="24" :item-render="{}" title-overflow>
+              <template #default="params">
+                <vxe-select v-model="params.data.sex" placeholder="请选择性别" clearable @change="$refs.xForm.updateStatus(params)">
+                  <vxe-option value="1" label="女"></vxe-option>
+                  <vxe-option value="2" label="男"></vxe-option>
+                </vxe-select>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="标题貌似有点长呢" field="age" span="24" :item-render="{}" title-overflow="title">
+              <template #default="params">
+                <vxe-input v-model="params.data.age" type="integer" placeholder="请输入年龄" clearable @change="$refs.xForm.updateStatus(params)"></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="标题貌似有点长呢" field="date" span="24" :item-render="{}" title-overflow="ellipsis">
+              <template #default="{ data }">
+                <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
+              </template>
+            </vxe-form-item>
+          </vxe-form-gather>
+          <vxe-form-gather span="12">
+            <vxe-form-item title="标题貌似有点长呢标题貌似有点长呢" field="address" span="24" :item-render="{}">
+              <template #default="{ data }">
+                <vxe-textarea v-model="data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable></vxe-textarea>
+              </template>
+            </vxe-form-item>
+          </vxe-form-gather>
+          <vxe-form-item align="center" span="24">
+            <template #default>
+              <vxe-button type="submit" status="primary" content="基本表单"></vxe-button>
+              <vxe-button type="reset" content="重置"></vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+        `,
+        `
+        import { defineComponent, reactive } from 'vue'
+        import { VXETable, VxeFormEvents, VxeFormPropTypes } from 'vxe-table'
 
+        export default defineComponent({
+          setup  () {
             const demo2 = reactive({
               loading2: false,
               formData2: {
@@ -690,7 +617,102 @@ export default defineComponent({
               } as VxeFormPropTypes.Rules
             })
 
+            const submitEvent2: VxeFormEvents.Submit = () => {
+              demo2.loading2 = true
+              setTimeout(() => {
+                demo2.loading2 = false
+                VXETable.modal.message({ content: '保存成功', status: 'success' })
+              }, 1000)
+            }
+
+            const searchEvent: VxeFormEvents.Submit = () => {
+              VXETable.modal.message({ content: '查询事件', status: 'info' })
+            }
+
+            const resetEvent: VxeFormEvents.Reset = () => {
+              VXETable.modal.message({ content: '重置事件', status: 'info' })
+            }
+
+            return {
+              demo2,
+              submitEvent2,
+              searchEvent,
+              resetEvent,
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form v-model:collapseStatus="demo3.collapseStatus3" :data="demo3.formData3" title-align="right" title-width="100" prevent-submit title-colon custom-layout>
+          <div style="color: red;">使用自定义布局</div>
+          <vxe-form-item title="名称" field="name" :item-render="{}">
+            <template #default="{ data }">
+              <vxe-input v-model="data.name" placeholder="请输入名称" clearable></vxe-input>
+            </template>
+          </vxe-form-item>
+          <div style="border: 1px dashed green;padding: 10px;">
+            <vxe-form-item title="昵称" field="nickname" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-exclamation-circle' }">
+              <template #default="{ data }">
+                <vxe-input v-model="data.nickname" placeholder="请输入昵称" clearable></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="性别" field="sex" :item-render="{}" :title-prefix="{ message: '左边图标', icon: 'fa fa-thumbs-up' }" :title-suffix="{ message: '右边图标', icon: 'fa fa-mars-stroke' }">
+              <template #title>
+                <span style="color: red;">标题</span>
+              </template>
+              <template #default="{ data }">
+                <vxe-select v-model="data.sex" placeholder="请选择性别" clearable>
+                  <vxe-option value="1" label="女"></vxe-option>
+                  <vxe-option value="2" label="男"></vxe-option>
+                </vxe-select>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="年龄" field="age" :item-render="{}" :title-suffix="{ message: '右边图标', icon: 'fa fa-info-circle' }">
+              <template #default="{ data }">
+                <vxe-input v-model="data.age" type="integer" placeholder="请输入年龄" clearable></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="是否禁用" field="active" :item-render="{}">
+              <template #default="{ data }">
+                <vxe-switch v-model="data.active" open-label="是" close-label="否"></vxe-switch>
+              </template>
+            </vxe-form-item>
+            <div>
+              <vxe-checkbox v-model="demo3.collapseStatus3" content="查看更多" :checked-value="false" :unchecked-value="true"></vxe-checkbox>
+            </div>
+            <vxe-form-item title="日期" field="date" :item-render="{}" folding>
+              <template #default="{ data }">
+                <vxe-input v-model="data.date" type="date" placeholder="请选择日期" clearable></vxe-input>
+              </template>
+            </vxe-form-item>
+            <vxe-form-item title="兴趣爱好" field="flagList" :item-render="{}" folding>
+              <template #default="{ data }">
+                <vxe-checkbox-group v-model="data.flagList">
+                  <vxe-checkbox label="1" content="爬山"></vxe-checkbox>
+                  <vxe-checkbox label="2" content="跑步"></vxe-checkbox>
+                  <vxe-checkbox label="3" content="听歌"></vxe-checkbox>
+                </vxe-checkbox-group>
+              </template>
+            </vxe-form-item>
+            <div>
+              <vxe-form-item align="center" collapse-node>
+                <template #default>
+                  <vxe-button status="primary" content="手动提交方式" @click="searchEvent"></vxe-button>
+                  <vxe-button content="重置" @click="resetEvent"></vxe-button>
+                </template>
+              </vxe-form-item>
+            </div>
+          </div>
+        </vxe-form>
+        `,
+        `
+        import { defineComponent, reactive } from 'vue'
+        import { VXETable, VxeFormEvents } from 'vxe-table'
+
+        export default defineComponent({
+          setup  () {
             const demo3 = reactive({
+              collapseStatus3: true,
               formData3: {
                 name: '',
                 nickname: '',
@@ -705,6 +727,34 @@ export default defineComponent({
               }
             })
 
+            const searchEvent: VxeFormEvents.Submit = () => {
+              VXETable.modal.message({ content: '查询事件', status: 'info' })
+            }
+
+            const resetEvent: VxeFormEvents.Reset = () => {
+              VXETable.modal.message({ content: '重置事件', status: 'info' })
+            }
+
+            return {
+              demo3,
+              searchEvent,
+              resetEvent,
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form :data="demo4.formData4" :items="demo4.formItems4">
+          <template #myregion="{ data }">
+            <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
+          </template>
+        </vxe-form>
+        `,
+        `
+        import { defineComponent, reactive } from 'vue'
+
+        export default defineComponent({
+          setup  () {
             const demo4 = reactive({
               formData4: {
                 name: '',
@@ -744,30 +794,8 @@ export default defineComponent({
               ]
             })
 
-            const submitEvent2: VxeFormEvents.Submit = () => {
-              demo2.loading2 = true
-              setTimeout(() => {
-                demo2.loading2 = false
-                VXETable.modal.message({ content: '保存成功', status: 'success' })
-              }, 1000)
-            }
-
-            const searchEvent: VxeFormEvents.Submit = () => {
-              VXETable.modal.message({ content: '查询事件', status: 'info' })
-            }
-
-            const resetEvent: VxeFormEvents.Reset = () => {
-              VXETable.modal.message({ content: '重置事件', status: 'info' })
-            }
-
             return {
-              demo1,
-              demo2,
-              submitEvent2,
-              demo3,
-              demo4,
-              searchEvent,
-              resetEvent,
+              demo4
             }
           }
         }
diff --git a/examples/views/start/Theme.vue b/examples/views/start/Theme.vue
index c779ddc99..c716ef94b 100644
--- a/examples/views/start/Theme.vue
+++ b/examples/views/start/Theme.vue
@@ -2,6 +2,21 @@
   <div>
     <h2>{{ $t('app.aside.nav.theme') }}</h2>
     <p class="tip">第一种方式：创建 scss 文件（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>），并引入所有样式</p>
+    <pre>
+      <pre-code class="scss">
+        // 修改样式变量
+        $vxe-font-size: 14px;
+        $vxe-font-color: #666;
+        $vxe-primary-color: #409eff;
+        $vxe-table-font-color: $vxe-font-color;
+        $vxe-table-border-color: #e8eaec;
+        $vxe-table-border-radius: 4px;
+        // ...
+
+        @import 'vxe-table/styles/index.scss';
+      </pre-code>
+    </pre>
+    <p class="tip">第二种方式：创建 scss 文件（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>），并引入所有样式</p>
     <pre>
       <pre-code class="scss">
         @import 'vxe-table/styles/variable.scss';
@@ -18,7 +33,7 @@
         @import 'vxe-table/styles/modules.scss';
       </pre-code>
     </pre>
-    <p class="tip">第二种方式：创建 scss 文件（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>），并按需引入模块样式（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/modules.scss" target="_blank">查看所有模块</a>）</p>
+    <p class="tip">第三种方式：创建 scss 文件（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/variable.scss" target="_blank">查看所有变量</a>），并按需引入模块样式（<a class="link" href="https://github.com/x-extends/vxe-table/blob/master/styles/modules.scss" target="_blank">查看所有模块</a>）</p>
     <pre>
       <pre-code class="scss">
         @import 'vxe-table/styles/variable.scss';
diff --git a/helper/vetur/attributes.json b/helper/vetur/attributes.json
index 35179e31d..6ad0d9189 100644
--- a/helper/vetur/attributes.json
+++ b/helper/vetur/attributes.json
@@ -1787,6 +1787,14 @@
     "type": "string, ({ data }) => string",
     "description": "给表单附加 className"
   },
+  "vxe-form/collapse-status": {
+    "type": "boolean",
+    "description": "v-model 绑定值，折叠状态"
+  },
+  "vxe-form/custom-layout": {
+    "type": "boolean",
+    "description": "是否使用自定义布局"
+  },
   "vxe-form/items": {
     "type": "any[]",
     "description": "项列表"
diff --git a/helper/vetur/tags.json b/helper/vetur/tags.json
index 7092800c7..d0030c503 100644
--- a/helper/vetur/tags.json
+++ b/helper/vetur/tags.json
@@ -579,6 +579,8 @@
       "title-asterisk",
       "title-overflow",
       "class-name",
+      "collapse-status",
+      "custom-layout",
       "items",
       "rules",
       "prevent-submit",
diff --git a/package.json b/package.json
index 48993e68b..d52d2a1bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.0.28",
+  "version": "4.0.29-beta.0",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -46,7 +46,7 @@
     "ant-design-vue": "^2.2.8",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
-    "element-plus": "^1.1.0-beta.16",
+    "element-plus": "^1.1.0-beta.19",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
@@ -88,7 +88,7 @@
     "vxe-table-plugin-shortcut-key": "^3.0.2",
     "xe-ajax": "^4.0.5",
     "xe-clipboard": "^1.10.1",
-    "xe-utils": "^3.3.4",
+    "xe-utils": "^3.4.0",
     "xlsx": "^0.17.2"
   },
   "peerDependencies": {
diff --git a/packages/form/src/form-gather.ts b/packages/form/src/form-gather.ts
index 65c00c677..7a0b64743 100644
--- a/packages/form/src/form-gather.ts
+++ b/packages/form/src/form-gather.ts
@@ -1,16 +1,18 @@
-import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, provide } from 'vue'
+import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, provide, nextTick } from 'vue'
+import { errLog } from '../../tools/utils'
 import { createItem, watchItem, destroyItem, assemItem, XEFormItemProvide } from './util'
 import { formItemProps } from './form-item'
 
-import { VxeFormConstructor } from '../../../types/all'
+import { VxeFormConstructor, VxeFormPrivateMethods } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeFormGather',
   props: formItemProps,
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
-    const $xeform = inject('$xeform', {} as VxeFormConstructor)
+    const $xeform = inject('$xeform', {} as VxeFormConstructor & VxeFormPrivateMethods)
     const formGather = inject('xeformgather', null as XEFormItemProvide | null)
+    const defaultSlot = slots.default
     const formItem = createItem($xeform, props)
     const xeformitem: XEFormItemProvide = { formItem }
     formItem.children = []
@@ -27,10 +29,18 @@ export default defineComponent({
       destroyItem($xeform, formItem)
     })
 
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      nextTick(() => {
+        if ($xeform && $xeform.props.customLayout) {
+          errLog('vxe.error.errConflicts', ['custom-layout', '<form-gather ...>'])
+        }
+      })
+    }
+
     const renderVN = () => {
       return h('div', {
         ref: refElem
-      }, slots.default ? slots.default() : [])
+      }, defaultSlot ? defaultSlot() : [])
     }
 
     return renderVN
diff --git a/packages/form/src/form-item.ts b/packages/form/src/form-item.ts
index bc728cab0..8ec55935d 100644
--- a/packages/form/src/form-item.ts
+++ b/packages/form/src/form-item.ts
@@ -1,7 +1,12 @@
 import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, PropType } from 'vue'
+import XEUtils from 'xe-utils'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import { VXETable } from '../../v-x-e-table'
+import { getFuncText, isEnableConf } from '../../tools/utils'
 import { createItem, watchItem, destroyItem, assemItem, XEFormItemProvide } from './util'
+import { renderTitle } from './render'
 
-import { VxeFormConstructor, VxeFormItemPropTypes } from '../../../types/all'
+import { VxeFormConstructor, VxeFormDefines, VxeFormItemPropTypes, VxeFormPrivateMethods } from '../../../types/all'
 
 export const formItemProps = {
   title: String as PropType<VxeFormItemPropTypes.Title>,
@@ -27,7 +32,7 @@ export default defineComponent({
   props: formItemProps,
   setup (props, { slots }) {
     const refElem = ref() as Ref<HTMLDivElement>
-    const $xeform = inject('$xeform', {} as VxeFormConstructor)
+    const $xeform = inject('$xeform', {} as VxeFormConstructor & VxeFormPrivateMethods)
     const formGather = inject('xeformgather', null as XEFormItemProvide | null)
     const formItem = createItem($xeform, props)
     formItem.slots = slots
@@ -42,8 +47,109 @@ export default defineComponent({
       destroyItem($xeform, formItem)
     })
 
-    const renderVN = () => {
+    const renderItem = ($xeform: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => {
+      const { props, reactData } = $xeform
+      const { data, rules, titleOverflow: allTitleOverflow } = props
+      const { collapseAll } = reactData
+      const { computeValidOpts } = $xeform.getComputeMaps()
+      const validOpts = computeValidOpts.value
+      const { slots, title, visible, folding, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
+      const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+      const defaultSlot = slots ? slots.default : null
+      const titleSlot = slots ? slots.title : null
+      const span = item.span || props.span
+      const align = item.align || props.align
+      const titleAlign = item.titleAlign || props.titleAlign
+      const titleWidth = item.titleWidth || props.titleWidth
+      const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow
+      const showEllipsis = itemOverflow === 'ellipsis'
+      const showTitle = itemOverflow === 'title'
+      const showTooltip = itemOverflow === true || itemOverflow === 'tooltip'
+      const hasEllipsis = showTitle || showTooltip || showEllipsis
+      let itemVisibleMethod = visibleMethod
+      const params = { data, property: field, item, $form: $xeform }
+      let isRequired = false
+      if (rules) {
+        const itemRules = rules[field]
+        if (itemRules) {
+          isRequired = itemRules.some((rule) => rule.required)
+        }
+      }
+      if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
+        itemVisibleMethod = compConf.itemVisibleMethod
+      }
+      let contentVNs: any[] = []
+      if (defaultSlot) {
+        contentVNs = $xeform.callSlot(defaultSlot, params)
+      } else if (compConf && compConf.renderItemContent) {
+        contentVNs = compConf.renderItemContent(itemRender, params)
+      } else if (field) {
+        contentVNs = [`${XEUtils.get(data, field)}`]
+      }
+      if (collapseNode) {
+        contentVNs.push(
+          h('div', {
+            class: 'vxe-form--item-trigger-node',
+            onClick: $xeform.toggleCollapseEvent
+          }, [
+            h('span', {
+              class: 'vxe-form--item-trigger-text'
+            }, collapseAll ? GlobalConfig.i18n('vxe.form.unfolding') : GlobalConfig.i18n('vxe.form.folding')),
+            h('i', {
+              class: ['vxe-form--item-trigger-icon', collapseAll ? GlobalConfig.icon.FORM_FOLDING : GlobalConfig.icon.FORM_UNFOLDING]
+            })
+          ])
+        )
+      }
+      if (errRule && validOpts.showMessage) {
+        contentVNs.push(
+          h('div', {
+            class: 'vxe-form--item-valid',
+            style: errRule.maxWidth ? {
+              width: `${errRule.maxWidth}px`
+            } : null
+          }, errRule.message)
+        )
+      }
+      const ons = showTooltip ? {
+        onMouseenter (evnt: MouseEvent) {
+          $xeform.triggerHeaderHelpEvent(evnt, params)
+        },
+        onMouseleave: $xeform.handleTargetLeaveEvent
+      } : {}
       return h('div', {
+        ref: refElem,
+        class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
+          'is--title': title,
+          'is--required': isRequired,
+          'is--hidden': visible === false || (folding && collapseAll),
+          'is--active': !itemVisibleMethod || itemVisibleMethod(params),
+          'is--error': showError
+        }]
+      }, [
+        h('div', {
+          class: 'vxe-form--item-inner'
+        }, [
+          title || titleSlot ? h('div', {
+            class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
+              'is--ellipsis': hasEllipsis
+            }],
+            style: titleWidth ? {
+              width: isNaN(titleWidth as number) ? titleWidth : `${titleWidth}px`
+            } : null,
+            title: showTitle ? getFuncText(title) : null,
+            ...ons
+          }, renderTitle($xeform, item)) : null,
+          h('div', {
+            class: ['vxe-form--item-content', align ? `align--${align}` : null]
+          }, contentVNs)
+        ])
+      ])
+    }
+
+    const renderVN = () => {
+      const formProps = $xeform ? $xeform.props : null
+      return formProps && formProps.customLayout ? renderItem($xeform, formItem as unknown as VxeFormDefines.ItemInfo) : h('div', {
         ref: refElem
       })
     }
diff --git a/packages/form/src/form.ts b/packages/form/src/form.ts
index 1aa70fd7e..2bbf24fb5 100644
--- a/packages/form/src/form.ts
+++ b/packages/form/src/form.ts
@@ -3,10 +3,12 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import { VXETable } from '../../v-x-e-table'
 import { errLog, getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils'
+import { scrollToView } from '../../tools/dom'
 import { createItem } from './util'
+import { renderTitle } from './render'
 import { useSize } from '../../hooks/size'
 
-import { VxeFormConstructor, VxeFormPropTypes, VxeFormEmits, FormReactData, FormMethods, FormPrivateRef, VxeFormPrivateMethods, VxeFormDefines, VxeFormItemPropTypes, VxeTooltipInstance, FormInternalData } from '../../../types/all'
+import { VxeFormConstructor, VxeFormPropTypes, VxeFormEmits, FormReactData, FormMethods, FormPrivateRef, VxeFormPrivateMethods, VxeFormDefines, VxeFormItemPropTypes, VxeTooltipInstance, FormInternalData, VxeFormPrivateComputed } from '../../../types/all'
 
 class Rule {
   constructor (rule: any) {
@@ -63,6 +65,7 @@ function getResetValue (value: any, resetValue: any) {
 export default defineComponent({
   name: 'VxeForm',
   props: {
+    collapseStatus: { type: Boolean as PropType<VxeFormPropTypes.CollapseStatus>, default: true },
     loading: Boolean as PropType<VxeFormPropTypes.Loading>,
     data: Object as PropType<VxeFormPropTypes.Data>,
     size: { type: String as PropType<VxeFormPropTypes.Size>, default: () => GlobalConfig.form.size || GlobalConfig.size },
@@ -78,9 +81,12 @@ export default defineComponent({
     rules: Object as PropType<VxeFormPropTypes.Rules>,
     preventSubmit: { type: Boolean as PropType<VxeFormPropTypes.PreventSubmit>, default: () => GlobalConfig.form.preventSubmit },
     validConfig: Object as PropType<VxeFormPropTypes.ValidConfig>,
-    tooltipConfig: Object as PropType<VxeFormPropTypes.TooltipConfig>
+    tooltipConfig: Object as PropType<VxeFormPropTypes.TooltipConfig>,
+    customLayout: { type: Boolean as PropType<VxeFormPropTypes.CustomLayout>, default: () => GlobalConfig.form.customLayout }
   },
   emits: [
+    'update:collapseStatus',
+    'collapse',
     'toggle-collapse',
     'submit',
     'submit-invalid',
@@ -96,7 +102,7 @@ export default defineComponent({
     const computeSize = useSize(props)
 
     const reactData = reactive<FormReactData>({
-      collapseAll: true,
+      collapseAll: props.collapseStatus,
       staticItems: [],
       formItems: []
     })
@@ -113,18 +119,6 @@ export default defineComponent({
     const refElem = ref() as Ref<HTMLFormElement>
     const refTooltip = ref() as Ref<VxeTooltipInstance>
 
-    const refMaps: FormPrivateRef = {
-      refElem
-    }
-
-    const $xeform = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps
-    } as unknown as VxeFormConstructor & VxeFormPrivateMethods
-
     let formMethods = {} as FormMethods
 
     const computeValidOpts = computed(() => {
@@ -151,6 +145,25 @@ export default defineComponent({
       return opts
     })
 
+    const refMaps: FormPrivateRef = {
+      refElem
+    }
+
+    const computeMaps: VxeFormPrivateComputed = {
+      computeSize,
+      computeValidOpts,
+      computeTooltipOpts
+    }
+
+    const $xeform = {
+      xID,
+      props,
+      context,
+      reactData,
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeFormConstructor & VxeFormPrivateMethods
+
     const callSlot = (slotFunc: ((params: any) => any) | string | null, params: any): VNode[] => {
       if (slotFunc) {
         if (XEUtils.isString(slotFunc)) {
@@ -191,14 +204,22 @@ export default defineComponent({
       return itemList
     }
 
+    const getCollapseStatus = () => {
+      return reactData.collapseAll
+    }
+
     const toggleCollapse = () => {
-      reactData.collapseAll = !reactData.collapseAll
+      const status = !getCollapseStatus()
+      reactData.collapseAll = status
+      emit('update:collapseStatus', status)
       return nextTick()
     }
 
     const toggleCollapseEvent = (evnt: Event) => {
       toggleCollapse()
-      formMethods.dispatchEvent('toggle-collapse', { collapse: !reactData.collapseAll, data: props.data }, evnt)
+      const status = getCollapseStatus()
+      formMethods.dispatchEvent('toggle-collapse', { status, collapse: status, data: props.data }, evnt)
+      formMethods.dispatchEvent('collapse', { status, collapse: status, data: props.data }, evnt)
     }
 
     const clearValidate = (field?: string) => {
@@ -244,12 +265,16 @@ export default defineComponent({
     const handleFocus = (fields: string[]) => {
       const itemList = getItems()
       const el = refElem.value
-      fields.some((property) => {
+      fields.some((property, index) => {
         const item = itemList.find((item) => item.field === property)
         if (item && isEnableConf(item.itemRender)) {
           const { itemRender } = item
           const compConf = VXETable.renderer.get(itemRender.name)
           let inputElem: HTMLInputElement | null = null
+          // 定位到第一个
+          if (!index) {
+            scrollToView(el.querySelector(`.${item.id}`))
+          }
           // 如果指定了聚焦 class
           if (itemRender.autofocus) {
             inputElem = el.querySelector(`.${item.id} ${itemRender.autofocus}`) as HTMLInputElement
@@ -489,79 +514,6 @@ export default defineComponent({
       }
     }
 
-    const renderPrefixIcon = (titlePrefix: VxeFormItemPropTypes.TitlePrefix) => {
-      return h('span', {
-        class: 'vxe-form--item-title-prefix'
-      }, [
-        h('i', {
-          class: titlePrefix.icon || GlobalConfig.icon.FORM_PREFIX
-        })
-      ])
-    }
-
-    const renderSuffixIcon = (titleSuffix: VxeFormItemPropTypes.TitleSuffix) => {
-      return h('span', {
-        class: 'vxe-form--item-title-suffix'
-      }, [
-        h('i', {
-          class: titleSuffix.icon || GlobalConfig.icon.FORM_SUFFIX
-        })
-      ])
-    }
-
-    const renderTitle = (item: VxeFormDefines.ItemInfo) => {
-      const { data } = props
-      const { slots, field, itemRender, titlePrefix, titleSuffix } = item
-      const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
-      const params = { data, property: field, item, $form: $xeform }
-      const titleSlot = slots ? slots.title : null
-      const contVNs = []
-      const titVNs = []
-      if (titlePrefix) {
-        titVNs.push(
-          titlePrefix.message
-            ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
-              content: getFuncText(titlePrefix.message),
-              enterable: titlePrefix.enterable,
-              theme: titlePrefix.theme
-            }, {
-              default: () => renderPrefixIcon(titlePrefix)
-            })
-            : renderPrefixIcon(titlePrefix)
-        )
-      }
-      titVNs.push(
-        h('span', {
-          class: 'vxe-form--item-title-label'
-        }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (titleSlot ? callSlot(titleSlot, params) : getFuncText(item.title)))
-      )
-      contVNs.push(
-        h('div', {
-          class: 'vxe-form--item-title-content'
-        }, titVNs)
-      )
-      const fixVNs = []
-      if (titleSuffix) {
-        fixVNs.push(
-          titleSuffix.message
-            ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
-              content: getFuncText(titleSuffix.message),
-              enterable: titleSuffix.enterable,
-              theme: titleSuffix.theme
-            }, {
-              default: () => renderSuffixIcon(titleSuffix)
-            })
-            : renderSuffixIcon(titleSuffix)
-        )
-      }
-      contVNs.push(
-        h('div', {
-          class: 'vxe-form--item-title-postfix'
-        }, fixVNs)
-      )
-      return contVNs
-    }
-
     const renderItems = (itemList: VxeFormDefines.ItemInfo[]): VNode[] => {
       const { data, rules, titleOverflow: allTitleOverflow } = props
       const { collapseAll } = reactData
@@ -664,7 +616,7 @@ export default defineComponent({
               } : null,
               title: showTitle ? getFuncText(title) : null,
               ...ons
-            }, renderTitle(item)) : null,
+            }, renderTitle($xeform, item)) : null,
             h('div', {
               class: ['vxe-form--item-content', align ? `align--${align}` : null]
             }, contentVNs)
@@ -687,7 +639,14 @@ export default defineComponent({
       closeTooltip
     }
 
-    Object.assign($xeform, formMethods)
+    const formPrivateMethods: VxeFormPrivateMethods = {
+      callSlot,
+      toggleCollapseEvent,
+      triggerHeaderHelpEvent,
+      handleTargetLeaveEvent
+    }
+
+    Object.assign($xeform, formMethods, formPrivateMethods)
 
     watch(() => reactData.staticItems, (value) => {
       reactData.formItems = value
@@ -697,17 +656,27 @@ export default defineComponent({
       loadItem(value || [])
     })
 
+    watch(() => props.collapseStatus, (value) => {
+      reactData.collapseAll = !!value
+    })
+
     onMounted(() => {
       nextTick(() => {
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          if (props.customLayout && props.items) {
+            errLog('vxe.error.errConflicts', ['custom-layout', 'items'])
+          }
+        }
         loadItem(props.items || [])
       })
     })
 
     const renderVN = () => {
-      const { loading, className, data, titleColon, titleAsterisk } = props
+      const { loading, className, data, titleColon, titleAsterisk, customLayout } = props
       const { formItems } = reactData
       const vSize = computeSize.value
       const tooltipOpts = computeTooltipOpts.value
+      const defaultSlot = slots.default
       return h('form', {
         ref: refElem,
         class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: $xeform }) : className) : '', {
@@ -721,11 +690,11 @@ export default defineComponent({
       }, [
         h('div', {
           class: 'vxe-form--wrapper vxe-row'
-        }, renderItems(formItems)),
+        }, customLayout ? (defaultSlot ? defaultSlot({}) : []) : renderItems(formItems)),
         h('div', {
           class: 'vxe-form-slots',
           ref: 'hideItem'
-        }, slots.default ? slots.default({}) : []),
+        }, customLayout ? [] : (defaultSlot ? defaultSlot({}) : [])),
         h('div', {
           class: ['vxe-loading', {
             'is--visible': loading
diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts
new file mode 100644
index 000000000..ffeb70c39
--- /dev/null
+++ b/packages/form/src/render.ts
@@ -0,0 +1,79 @@
+import { ComponentOptions, h, resolveComponent } from 'vue'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import { VXETable } from '../../v-x-e-table'
+import { getFuncText, isEnableConf } from '../../tools/utils'
+
+import { VxeFormConstructor, VxeFormDefines, VxeFormItemPropTypes, VxeFormPrivateMethods } from '../../../types/all'
+
+function renderPrefixIcon (titlePrefix: VxeFormItemPropTypes.TitlePrefix) {
+  return h('span', {
+    class: 'vxe-form--item-title-prefix'
+  }, [
+    h('i', {
+      class: titlePrefix.icon || GlobalConfig.icon.FORM_PREFIX
+    })
+  ])
+}
+
+function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) {
+  return h('span', {
+    class: 'vxe-form--item-title-suffix'
+  }, [
+    h('i', {
+      class: titleSuffix.icon || GlobalConfig.icon.FORM_SUFFIX
+    })
+  ])
+}
+
+export function renderTitle ($xeform: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) {
+  const { data } = $xeform.props
+  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+  const params = { data, property: field, item, $form: $xeform }
+  const titleSlot = slots ? slots.title : null
+  const contVNs = []
+  const titVNs = []
+  if (titlePrefix) {
+    titVNs.push(
+      titlePrefix.message
+        ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
+          content: getFuncText(titlePrefix.message),
+          enterable: titlePrefix.enterable,
+          theme: titlePrefix.theme
+        }, {
+          default: () => renderPrefixIcon(titlePrefix)
+        })
+        : renderPrefixIcon(titlePrefix)
+    )
+  }
+  titVNs.push(
+    h('span', {
+      class: 'vxe-form--item-title-label'
+    }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (titleSlot ? $xeform.callSlot(titleSlot, params) : getFuncText(item.title)))
+  )
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs)
+  )
+  const fixVNs = []
+  if (titleSuffix) {
+    fixVNs.push(
+      titleSuffix.message
+        ? h(resolveComponent('vxe-tooltip') as ComponentOptions, {
+          content: getFuncText(titleSuffix.message),
+          enterable: titleSuffix.enterable,
+          theme: titleSuffix.theme
+        }, {
+          default: () => renderSuffixIcon(titleSuffix)
+        })
+        : renderSuffixIcon(titleSuffix)
+    )
+  }
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-postfix'
+    }, fixVNs)
+  )
+  return contVNs
+}
diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts
index e8a9fba20..21e23ec2b 100644
--- a/packages/grid/src/grid.ts
+++ b/packages/grid/src/grid.ts
@@ -21,6 +21,7 @@ const gridComponentEmits: VxeGridEmits = [
   'form-submit',
   'form-submit-invalid',
   'form-reset',
+  'form-collapse',
   'form-toggle-collapse',
   'toolbar-button-click',
   'toolbar-tool-click',
@@ -358,9 +359,10 @@ export default defineComponent({
       gridMethods.dispatchEvent('form-submit-invalid', params)
     }
 
-    const togglCollapseEvent: VxeFormEvents.ToggleCollapse = (params) => {
+    const collapseEvent: VxeFormEvents.Collapse = (params) => {
       nextTick(() => gridExtendTableMethods.recalculate(true))
       gridMethods.dispatchEvent('form-toggle-collapse', params)
+      gridMethods.dispatchEvent('form-collapse', params)
     }
 
     const handleZoom = (isMax?: boolean) => {
@@ -436,7 +438,7 @@ export default defineComponent({
                 onSubmit: submitFormEvent,
                 onReset: resetFormEvent,
                 onSubmitInvalid: submitInvalidEvent,
-                onToggleCollapse: togglCollapseEvent
+                onCollapse: collapseEvent
               }, formSlots)
             )
           }
diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts
index 5e46a69ee..1b8755a7f 100644
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -423,7 +423,7 @@ export default defineComponent({
       const { fixedType } = props
       const { highlightHoverRow } = tableProps
       const { scrollXLoad, scrollYLoad } = tableReactData
-      const { lastScrollTop, lastScrollLeft } = tableInternalData
+      const { elemStore, lastScrollTop, lastScrollLeft } = tableInternalData
       const tableHeader = refTableHeader.value
       const tableBody = refTableBody.value
       const tableFooter = refTableFooter.value
@@ -436,6 +436,10 @@ export default defineComponent({
       const bodyElem = tableBody.$el as XEBodyScrollElement
       const leftElem = leftBody ? leftBody.$el as XEBodyScrollElement : null
       const rightElem = rightBody ? rightBody.$el as XEBodyScrollElement : null
+      const bodyYElem = elemStore['main-body-ySpace']
+      const bodyXElem = elemStore['main-body-xSpace']
+      const bodyHeight = bodyYElem ? bodyYElem.clientHeight : 0
+      const bodyWidth = bodyXElem ? bodyXElem.clientWidth : 0
       let scrollTop = scrollBodyElem.scrollTop
       const scrollLeft = bodyElem.scrollLeft
       const isRollX = scrollLeft !== lastScrollLeft
@@ -477,7 +481,7 @@ export default defineComponent({
       if (isRollX && validTip && validTip.reactData.visible) {
         validTip.updatePlacement()
       }
-      $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop, scrollLeft, isX: isRollX, isY: isRollY }, evnt)
+      $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop, scrollLeft, bodyHeight, bodyWidth, isX: isRollX, isY: isRollY }, evnt)
     }
 
     let wheelTime: any
@@ -487,12 +491,17 @@ export default defineComponent({
     let isPrevWheelTop = false
 
     const handleWheel = (evnt: WheelEvent, isTopWheel: boolean, deltaTop: number, isRollX: boolean, isRollY: boolean) => {
+      const { elemStore } = tableInternalData
       const tableBody = refTableBody.value
       const leftBody = refTableLeftBody.value
       const rightBody = refTableRightBody.value
       const leftElem = leftBody ? leftBody.$el as HTMLDivElement : null
       const rightElem = rightBody ? rightBody.$el as HTMLDivElement : null
       const bodyElem = tableBody.$el as HTMLDivElement
+      const bodyYElem = elemStore['main-body-ySpace']
+      const bodyXElem = elemStore['main-body-xSpace']
+      const bodyHeight = bodyYElem ? bodyYElem.clientHeight : 0
+      const bodyWidth = bodyXElem ? bodyXElem.clientWidth : 0
       const remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0
       isPrevWheelTop = isTopWheel
       wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize)
@@ -519,7 +528,7 @@ export default defineComponent({
           if (isTopWheel ? targerTop < scrollHeight - clientHeight : targerTop >= 0) {
             wheelTime = setTimeout(handleSmooth, 10)
           }
-          $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft: bodyElem.scrollLeft, isX: isRollX, isY: isRollY }, evnt)
+          $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft: bodyElem.scrollLeft, bodyHeight, bodyWidth, isX: isRollX, isY: isRollY }, evnt)
         }
       }
       handleSmooth()
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index bbf9da40c..c6233ae3e 100644
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -13,7 +13,7 @@ import tableProps from './props'
 import tableEmits from './emits'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
 
-import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, TablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps } from '../../../types/all'
+import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps } from '../../../types/all'
 
 const isWebkit = browse['-webkit'] && !browse.edge
 
@@ -514,7 +514,7 @@ export default defineComponent({
       return false
     })
 
-    const refMaps: TablePrivateRef = {
+    const refMaps: VxeTablePrivateRef = {
       refElem,
       refTooltip,
       refValidTooltip,
diff --git a/packages/tools/dom.ts b/packages/tools/dom.ts
index abf3b279a..c44d264bf 100644
--- a/packages/tools/dom.ts
+++ b/packages/tools/dom.ts
@@ -128,9 +128,10 @@ export function getAbsolutePos (elem: any) {
   return { boundingTop, top: scrollTop + boundingTop, boundingLeft, left: scrollLeft + boundingLeft, visibleHeight, visibleWidth }
 }
 
+const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
+const scrollIntoView = 'scrollIntoView'
+
 export function scrollToView (elem: any) {
-  const scrollIntoViewIfNeeded = 'scrollIntoViewIfNeeded'
-  const scrollIntoView = 'scrollIntoView'
   if (elem) {
     if (elem[scrollIntoViewIfNeeded]) {
       elem[scrollIntoViewIfNeeded]()
diff --git a/styles/variable.scss b/styles/variable.scss
index d4389966e..fd04c52eb 100644
--- a/styles/variable.scss
+++ b/styles/variable.scss
@@ -1,247 +1,247 @@
 /*font*/
-$vxe-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-$vxe-font-color: #606266;
-$vxe-font-size: 14px;
-$vxe-font-size-medium: 14px;
-$vxe-font-size-small: 13px;
-$vxe-font-size-mini: 12px;
+$vxe-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol !default;
+$vxe-font-color: #606266 !default;
+$vxe-font-size: 14px !default;
+$vxe-font-size-medium: 14px !default;
+$vxe-font-size-small: 13px !default;
+$vxe-font-size-mini: 12px !default;
 
 /*size*/
-$vxe-border-radius: 4px;
+$vxe-border-radius: 4px !default;
 
 /*icon*/
-$vxe-icon-font-family: Verdana,Arial,Tahoma;
-$vxe-icon-background-color: #fff;
+$vxe-icon-font-family: Verdana,Arial,Tahoma !default;
+$vxe-icon-background-color: #fff !default;
 
 /*color*/
-$vxe-primary-color: #409eff;
-$vxe-success-color: #67c23a;
-$vxe-info-color: #909399;
-$vxe-warning-color: #e6a23c;
-$vxe-danger-color: #f56c6c;
-$vxe-disabled-color: #BFBFBF;
-$vxe-primary-disabled-color: #c0c4cc;
+$vxe-primary-color: #409eff !default;
+$vxe-success-color: #67c23a !default;
+$vxe-info-color: #909399 !default;
+$vxe-warning-color: #e6a23c !default;
+$vxe-danger-color: #f56c6c !default;
+$vxe-disabled-color: #9e7d7d !default;
+$vxe-primary-disabled-color: #c0c4cc !default;
 
 /*input/radio/checkbox*/
-$vxe-input-border-color: #dcdfe6;
-$vxe-input-disabled-color: #dcdfe6;
-$vxe-input-disabled-background-color: #f3f3f3;
-$vxe-input-placeholder-color: #C0C4CC;
+$vxe-input-border-color: #dcdfe6 !default;
+$vxe-input-disabled-color: #dcdfe6 !default;
+$vxe-input-disabled-background-color: #f3f3f3 !default;
+$vxe-input-placeholder-color: #C0C4CC !default;
 
 /*popup*/
-$vxe-table-popup-border-color: #DADCE0;
+$vxe-table-popup-border-color: #DADCE0 !default;
 
 /*table*/
-$vxe-table-font-color: $vxe-font-color;
-$vxe-table-header-font-color: $vxe-font-color;
-$vxe-table-footer-font-color: $vxe-font-color;
-$vxe-table-border-radius: $vxe-border-radius;
-$vxe-table-border-width: 1px;
-$vxe-table-border-color: #e8eaec;
-$vxe-table-resizable-line-color: #D9DDDF;
-$vxe-table-resizable-drag-line-color: $vxe-primary-color;
-$vxe-table-header-background-color: #f8f8f9;
-$vxe-table-body-background-color: #ffffff;
-$vxe-table-footer-background-color: #ffffff;
-$vxe-table-tree-node-line-color:#909399;
-$vxe-table-tree-node-line-style: dotted;
-$vxe-table-header-font-weight: 700;
+$vxe-table-font-color: $vxe-font-color !default;
+$vxe-table-header-font-color: $vxe-font-color !default;
+$vxe-table-footer-font-color: $vxe-font-color !default;
+$vxe-table-border-radius: $vxe-border-radius !default;
+$vxe-table-border-width: 1px !default;
+$vxe-table-border-color: #e8eaec !default;
+$vxe-table-resizable-line-color: #D9DDDF !default;
+$vxe-table-resizable-drag-line-color: $vxe-primary-color !default;
+$vxe-table-header-background-color: #f8f8f9 !default;
+$vxe-table-body-background-color: #ffffff !default;
+$vxe-table-footer-background-color: #ffffff !default;
+$vxe-table-tree-node-line-color:#909399 !default;
+$vxe-table-tree-node-line-style: dotted !default;
+$vxe-table-header-font-weight: 700 !default;
 
-$vxe-table-row-height-default: 48px;
-$vxe-table-row-height-medium: 44px;
-$vxe-table-row-height-small: 40px;
-$vxe-table-row-height-mini: 36px;
-$vxe-table-row-line-height: 24px;
-$vxe-table-row-hover-background-color: #f5f7fa;
-$vxe-table-row-striped-background-color: #fafafa;
-$vxe-table-row-hover-striped-background-color: #f5f7fa;
-$vxe-table-row-radio-checked-background-color: #fff3e0;
-$vxe-table-row-hover-radio-checked-background-color: #ffebbc;
-$vxe-table-row-checkbox-checked-background-color: #fff3e0;
-$vxe-table-row-hover-checkbox-checked-background-color: #ffebbc;
-$vxe-table-row-current-background-color: #e6f7ff;
-$vxe-table-row-hover-current-background-color: #d7effb;
+$vxe-table-row-height-default: 48px !default;
+$vxe-table-row-height-medium: 44px !default;
+$vxe-table-row-height-small: 40px !default;
+$vxe-table-row-height-mini: 36px !default;
+$vxe-table-row-line-height: 24px !default;
+$vxe-table-row-hover-background-color: #f5f7fa !default;
+$vxe-table-row-striped-background-color: #fafafa !default;
+$vxe-table-row-hover-striped-background-color: #f5f7fa !default;
+$vxe-table-row-radio-checked-background-color: #fff3e0 !default;
+$vxe-table-row-hover-radio-checked-background-color: #ffebbc !default;
+$vxe-table-row-checkbox-checked-background-color: #fff3e0 !default;
+$vxe-table-row-hover-checkbox-checked-background-color: #ffebbc !default;
+$vxe-table-row-current-background-color: #e6f7ff !default;
+$vxe-table-row-hover-current-background-color: #d7effb !default;
 
-$vxe-table-column-hover-background-color: #d7effb;
-$vxe-table-column-current-background-color: #e6f7ff;
-$vxe-table-column-icon-border-color: #c0c4cc;
-$vxe-table-column-icon-border-hover-color: #515A6E;
+$vxe-table-column-hover-background-color: #d7effb !default;
+$vxe-table-column-current-background-color: #e6f7ff !default;
+$vxe-table-column-icon-border-color: #c0c4cc !default;
+$vxe-table-column-icon-border-hover-color: #515A6E !default;
 
-$vxe-table-cell-placeholder-color: #C0C4CC;
-$vxe-table-cell-padding-left: 10px;
-$vxe-table-cell-padding-right: 10px;
-$vxe-table-cell-input-height-default: $vxe-table-row-height-default - 6;
-$vxe-table-cell-input-height-medium: $vxe-table-row-height-medium - 6;
-$vxe-table-cell-input-height-small: $vxe-table-row-height-small - 6;
-$vxe-table-cell-input-height-mini: $vxe-table-row-height-mini - 6;
-$vxe-table-cell-dirty-width: 5px;
-$vxe-table-cell-dirty-update-color: #f56c6c;
-$vxe-table-cell-dirty-insert-color: #19A15F;
-$vxe-table-cell-area-border-color: $vxe-primary-color;
-$vxe-table-cell-area-border-width: 1px;
+$vxe-table-cell-placeholder-color: #C0C4CC !default;
+$vxe-table-cell-padding-left: 10px !default;
+$vxe-table-cell-padding-right: 10px !default;
+$vxe-table-cell-input-height-default: $vxe-table-row-height-default - 6 !default;
+$vxe-table-cell-input-height-medium: $vxe-table-row-height-medium - 6 !default;
+$vxe-table-cell-input-height-small: $vxe-table-row-height-small - 6 !default;
+$vxe-table-cell-input-height-mini: $vxe-table-row-height-mini - 6 !default;
+$vxe-table-cell-dirty-width: 5px !default;
+$vxe-table-cell-dirty-update-color: #f56c6c !default;
+$vxe-table-cell-dirty-insert-color: #19A15F !default;
+$vxe-table-cell-area-border-color: $vxe-primary-color !default;
+$vxe-table-cell-area-border-width: 1px !default;
 $vxe-table-cell-main-area-extension-border-color: #fff;
-$vxe-table-cell-main-area-extension-background-color: $vxe-primary-color;
-$vxe-table-cell-extend-area-border-width: 2px;
-$vxe-table-cell-copy-area-border-width: 3px;
-$vxe-table-cell-active-area-border-width: 2px;
-$vxe-table-cell-copy-area-border-color: $vxe-table-cell-area-border-color;
-$vxe-table-cell-extend-area-border-color: $vxe-table-cell-area-border-color;
-$vxe-table-cell-active-area-border-color: $vxe-table-cell-area-border-color;
-$vxe-table-cell-area-background-color: rgba(64,158,255,0.2);
+$vxe-table-cell-main-area-extension-background-color: $vxe-primary-color !default;
+$vxe-table-cell-extend-area-border-width: 2px !default;
+$vxe-table-cell-copy-area-border-width: 3px !default;
+$vxe-table-cell-active-area-border-width: 2px !default;
+$vxe-table-cell-copy-area-border-color: $vxe-table-cell-area-border-color !default;
+$vxe-table-cell-extend-area-border-color: $vxe-table-cell-area-border-color !default;
+$vxe-table-cell-active-area-border-color: $vxe-table-cell-area-border-color !default;
+$vxe-table-cell-area-background-color: rgba(64,158,255,0.2) !default;
 
-$vxe-table-checkbox-range-border-width: 1px;
-$vxe-table-checkbox-range-border-color: #006af1;
-$vxe-table-checkbox-range-background-color: rgba(50,128,252,0.2);
+$vxe-table-checkbox-range-border-width: 1px !default;
+$vxe-table-checkbox-range-border-color: #006af1 !default;
+$vxe-table-checkbox-range-background-color: rgba(50,128,252,0.2) !default;
 
-$vxe-table-fixed-left-scrolling-box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12);
-$vxe-table-fixed-right-scrolling-box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12);
+$vxe-table-fixed-left-scrolling-box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12) !default;
+$vxe-table-fixed-right-scrolling-box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12) !default;
 
 /*filter*/
-$vxe-table-filter-panel-background-color: #fff;
+$vxe-table-filter-panel-background-color: #fff !default;
 
 /*menu*/
-$vxe-table-menu-item-width: 178px;
-$vxe-table-menu-background-color: #fff;
+$vxe-table-menu-item-width: 178px !default;
+$vxe-table-menu-background-color: #fff !default;
 
 /*loading*/
-$vxe-loading-background-color: rgba(0, 0, 0, 0.2);
-$vxe-loading-z-index: 999;
+$vxe-loading-background-color: rgba(0, 0, 0, 0.2) !default;
+$vxe-loading-z-index: 999 !default;
 
 /*validate*/
-$vxe-table-validate-error-color: #f56c6c;
-$vxe-table-validate-tooltip-error-color: #fff;
-$vxe-table-validate-tooltip-error-background-color: $vxe-table-validate-error-color;
+$vxe-table-validate-error-color: #f56c6c !default;
+$vxe-table-validate-tooltip-error-color: #fff !default;
+$vxe-table-validate-tooltip-error-background-color: $vxe-table-validate-error-color !default;
 
 /*grid*/
-$vxe-grid-maximize-background-color: #fff;
+$vxe-grid-maximize-background-color: #fff !default;
 
 /*toolbar*/
-$vxe-toolbar-background-color: #fff;
-$vxe-toolbar-height-default: 52px;
-$vxe-toolbar-height-medium: 50px;
-$vxe-toolbar-height-small: 48px;
-$vxe-toolbar-height-mini: 46px;
-$vxe-toolbar-custom-active-background-color: #D9DADB;
-$vxe-toolbar-panel-background-color: #fff;
+$vxe-toolbar-background-color: #fff !default;
+$vxe-toolbar-height-default: 52px !default;
+$vxe-toolbar-height-medium: 50px !default;
+$vxe-toolbar-height-small: 48px !default;
+$vxe-toolbar-height-mini: 46px !default;
+$vxe-toolbar-custom-active-background-color: #D9DADB !default;
+$vxe-toolbar-panel-background-color: #fff !default;
 
 /*tooltip*/
-$vxe-tooltip-dark-color: #fff;
-$vxe-tooltip-dark-background-color: #303133;
-$vxe-tooltip-light-background-color: #fff;
-$vxe-tooltip-validate-error-color: #fff;
-$vxe-tooltip-validate-error-background-color: #f56c6c;
+$vxe-tooltip-dark-color: #fff !default;
+$vxe-tooltip-dark-background-color: #303133 !default;
+$vxe-tooltip-light-background-color: #fff !default;
+$vxe-tooltip-validate-error-color: #fff !default;
+$vxe-tooltip-validate-error-background-color: #f56c6c !default;
 
 /*pager*/
-$vxe-pager-background-color: #fff;
-$vxe-pager-perfect-background-color: #fff;
-$vxe-pager-perfect-button-background-color: #f4f4f5;
+$vxe-pager-background-color: #fff !default;
+$vxe-pager-perfect-background-color: #fff !default;
+$vxe-pager-perfect-button-background-color: #f4f4f5 !default;
 
 /*modal*/
-$vxe-modal-header-background-color: #F8F8F8;
-$vxe-modal-body-background-color: #fff;
-$vxe-modal-border-color: #ebeef5;
+$vxe-modal-header-background-color: #F8F8F8 !default;
+$vxe-modal-body-background-color: #fff !default;
+$vxe-modal-border-color: #ebeef5 !default;
 
 /*checkbox*/
-$vxe-checkbox-font-size-default: 16px;
-$vxe-checkbox-font-size-medium: 15px;
-$vxe-checkbox-font-size-small: 14px;
-$vxe-checkbox-font-size-mini: 14px;
-$vxe-checkbox-checked-width: 0.32em;
-$vxe-checkbox-checked-height: 0.64em;
-$vxe-checkbox-indeterminate-width: 0.6em;
-$vxe-checkbox-indeterminate-height: 2px;
-$vxe-checkbox-border-width: 2px;
-$vxe-checkbox-border-radius: 2px;
-$vxe-checkbox-icon-background-color: #fff;
-$vxe-checkbox-checked-icon-border-color: #fff;
-$vxe-checkbox-indeterminate-icon-background-color: #fff;
+$vxe-checkbox-font-size-default: 16px !default;
+$vxe-checkbox-font-size-medium: 15px !default;
+$vxe-checkbox-font-size-small: 14px !default;
+$vxe-checkbox-font-size-mini: 14px !default;
+$vxe-checkbox-checked-width: 0.32em !default;
+$vxe-checkbox-checked-height: 0.64em !default;
+$vxe-checkbox-indeterminate-width: 0.6em !default;
+$vxe-checkbox-indeterminate-height: 2px !default;
+$vxe-checkbox-border-width: 2px !default;
+$vxe-checkbox-border-radius: 2px !default;
+$vxe-checkbox-icon-background-color: #fff !default;
+$vxe-checkbox-checked-icon-border-color: #fff !default;
+$vxe-checkbox-indeterminate-icon-background-color: #fff !default;
 
 /*radio*/
-$vxe-radio-font-size-default: $vxe-checkbox-font-size-default;
-$vxe-radio-font-size-medium: $vxe-checkbox-font-size-medium;
-$vxe-radio-font-size-small: $vxe-checkbox-font-size-small;
-$vxe-radio-font-size-mini: $vxe-checkbox-font-size-mini;
-$vxe-radio-border-width: $vxe-checkbox-border-width;
-$vxe-radio-icon-background-color: #fff;
-$vxe-radio-checked-icon-background-color: #fff;
-$vxe-radio-indeterminate-icon-background-color: #fff;
-$vxe-radio-button-default-background-color: #fff;
+$vxe-radio-font-size-default: $vxe-checkbox-font-size-default !default;
+$vxe-radio-font-size-medium: $vxe-checkbox-font-size-medium !default;
+$vxe-radio-font-size-small: $vxe-checkbox-font-size-small !default;
+$vxe-radio-font-size-mini: $vxe-checkbox-font-size-mini !default;
+$vxe-radio-border-width: $vxe-checkbox-border-width !default;
+$vxe-radio-icon-background-color: #fff !default;
+$vxe-radio-checked-icon-background-color: #fff !default;
+$vxe-radio-indeterminate-icon-background-color: #fff !default;
+$vxe-radio-button-default-background-color: #fff !default;
 
 /*button*/
-$vxe-button-max-width: 500px;
-$vxe-button-default-background-color: #fff;
-$vxe-button-dropdown-panel-background-color: #fff;
-$vxe-button-height-default: 34px;
-$vxe-button-height-medium: 32px;
-$vxe-button-height-small: 30px;
-$vxe-button-height-mini: 28px;
+$vxe-button-max-width: 500px !default;
+$vxe-button-default-background-color: #fff !default;
+$vxe-button-dropdown-panel-background-color: #fff !default;
+$vxe-button-height-default: 34px !default;
+$vxe-button-height-medium: 32px !default;
+$vxe-button-height-small: 30px !default;
+$vxe-button-height-mini: 28px !default;
 
 /*input*/
-$vxe-input-background-color: #fff;
-$vxe-input-panel-background-color: $vxe-input-background-color;
-$vxe-input-date-festival-color: #999999;
-$vxe-input-date-festival-important-color: $vxe-primary-color;
-$vxe-input-date-notice-background-color: #FF0000;
-$vxe-input-date-picker-hover-background-color: #f2f6fc;
-$vxe-input-date-picker-selected-color: #fff;
-$vxe-input-date-time-confirm-button-color: #fff;
-$vxe-input-date-picker-festival-selected-color: $vxe-input-date-picker-selected-color;
-$vxe-input-date-picker-notice-selected-background-color: $vxe-input-date-picker-selected-color;
-$vxe-input-date-extra-color: #67c23a;
-$vxe-input-date-extra-important-color: #fd2222;
-$vxe-input-date-title-height-default: 30px;
-$vxe-input-date-title-height-medium: 29px;
-$vxe-input-date-title-height-small: 28px;
-$vxe-input-date-title-height-mini: 26px;
-$vxe-input-date-time-week-row-height-default: 38px;
-$vxe-input-date-time-week-row-height-medium: 36px;
-$vxe-input-date-time-week-row-height-small: 34px;
-$vxe-input-date-time-week-row-height-mini: 32px;
-$vxe-input-date-month-year-row-height-default: 48px;
-$vxe-input-date-month-year-row-height-medium: 46px;
-$vxe-input-date-month-year-row-height-small: 44px;
-$vxe-input-date-month-year-row-height-mini: 42px;
-$vxe-input-date-quarter-row-height-default: 60px;
-$vxe-input-date-quarter-row-height-medium: 58px;
-$vxe-input-date-quarter-row-height-small: 56px;
-$vxe-input-date-quarter-row-height-mini: 54px;
-$vxe-input-height-default: $vxe-button-height-default;
-$vxe-input-height-medium: $vxe-button-height-medium;
-$vxe-input-height-small: $vxe-button-height-small;
-$vxe-input-height-mini: $vxe-button-height-mini;
+$vxe-input-background-color: #fff !default;
+$vxe-input-panel-background-color: $vxe-input-background-color !default;
+$vxe-input-date-festival-color: #999999 !default;
+$vxe-input-date-festival-important-color: $vxe-primary-color !default;
+$vxe-input-date-notice-background-color: #FF0000 !default;
+$vxe-input-date-picker-hover-background-color: #f2f6fc !default;
+$vxe-input-date-picker-selected-color: #fff !default;
+$vxe-input-date-time-confirm-button-color: #fff !default;
+$vxe-input-date-picker-festival-selected-color: $vxe-input-date-picker-selected-color !default;
+$vxe-input-date-picker-notice-selected-background-color: $vxe-input-date-picker-selected-color !default;
+$vxe-input-date-extra-color: #67c23a !default;
+$vxe-input-date-extra-important-color: #fd2222 !default;
+$vxe-input-date-title-height-default: 30px !default;
+$vxe-input-date-title-height-medium: 29px !default;
+$vxe-input-date-title-height-small: 28px !default;
+$vxe-input-date-title-height-mini: 26px !default;
+$vxe-input-date-time-week-row-height-default: 38px !default;
+$vxe-input-date-time-week-row-height-medium: 36px !default;
+$vxe-input-date-time-week-row-height-small: 34px !default;
+$vxe-input-date-time-week-row-height-mini: 32px !default;
+$vxe-input-date-month-year-row-height-default: 48px !default;
+$vxe-input-date-month-year-row-height-medium: 46px !default;
+$vxe-input-date-month-year-row-height-small: 44px !default;
+$vxe-input-date-month-year-row-height-mini: 42px !default;
+$vxe-input-date-quarter-row-height-default: 60px !default;
+$vxe-input-date-quarter-row-height-medium: 58px !default;
+$vxe-input-date-quarter-row-height-small: 56px !default;
+$vxe-input-date-quarter-row-height-mini: 54px !default;
+$vxe-input-height-default: $vxe-button-height-default !default;
+$vxe-input-height-medium: $vxe-button-height-medium !default;
+$vxe-input-height-small: $vxe-button-height-small !default;
+$vxe-input-height-mini: $vxe-button-height-mini !default;
 
 /*textarea*/
-$vxe-textarea-line-height: 1.5715;
-$vxe-textarea-background-color: #fff;
-$vxe-textarea-count-color: #999;
-$vxe-textarea-count-background-color: #fff;
-$vxe-textarea-count-error-color: $vxe-table-validate-error-color;
+$vxe-textarea-line-height: 1.5715 !default;
+$vxe-textarea-background-color: #fff !default;
+$vxe-textarea-count-color: #999 !default;
+$vxe-textarea-count-background-color: #fff !default;
+$vxe-textarea-count-error-color: $vxe-table-validate-error-color !default;
 
 /*form*/
-$vxe-form-item-min-height-default: 36px;
-$vxe-form-item-min-height-medium: 34px;
-$vxe-form-item-min-height-small: 32px;
-$vxe-form-item-min-height-mini: 30px;
-$vxe-form-background-color: #fff;
-$vxe-form-validate-error-color: $vxe-table-validate-error-color;
-$vxe-form-validate-error-background-color: inherit;
+$vxe-form-item-min-height-default: 36px !default;
+$vxe-form-item-min-height-medium: 34px !default;
+$vxe-form-item-min-height-small: 32px !default;
+$vxe-form-item-min-height-mini: 30px !default;
+$vxe-form-background-color: #fff !default;
+$vxe-form-validate-error-color: $vxe-table-validate-error-color !default;
+$vxe-form-validate-error-background-color: inherit !default;
 
 /*select*/
-$vxe-select-option-height-default: 30px;
-$vxe-select-option-height-medium: 28px;
-$vxe-select-option-height-small: 26px;
-$vxe-select-option-height-mini: 24px;
-$vxe-select-option-hover-background-color: #f5f7fa;
-$vxe-select-panel-background-color: #fff;
-$vxe-select-empty-color: #C0C4CC;
-$vxe-optgroup-title-color:#909399;
+$vxe-select-option-height-default: 30px !default;
+$vxe-select-option-height-medium: 28px !default;
+$vxe-select-option-height-small: 26px !default;
+$vxe-select-option-height-mini: 24px !default;
+$vxe-select-option-hover-background-color: #f5f7fa !default;
+$vxe-select-panel-background-color: #fff !default;
+$vxe-select-empty-color: #C0C4CC !default;
+$vxe-optgroup-title-color:#909399 !default;
 
 /*switch*/
-$vxe-switch-font-color: #fff;
-$vxe-switch-icon-background-color: #fff;
-$vxe-switch-open-background-color: $vxe-primary-color;
-$vxe-switch-close-background-color: rgba(0,0,0,0.35);
-$vxe-switch-disabled-background-color: rgba(0,0,0,0.15);
+$vxe-switch-font-color: #fff !default;
+$vxe-switch-icon-background-color: #fff !default;
+$vxe-switch-open-background-color: $vxe-primary-color !default;
+$vxe-switch-close-background-color: rgba(0,0,0,0.35) !default;
+$vxe-switch-disabled-background-color: rgba(0,0,0,0.15) !default;
 
 /*pulldown*/
-$vxe-pulldown-panel-background-color: #fff;
+$vxe-pulldown-panel-background-color: #fff !default;
diff --git a/types/form.d.ts b/types/form.d.ts
index a8c6f632b..f986a3a22 100644
--- a/types/form.d.ts
+++ b/types/form.d.ts
@@ -1,4 +1,4 @@
-import { RenderFunction, SetupContext, ComponentPublicInstance, Ref } from 'vue'
+import { RenderFunction, SetupContext, ComponentPublicInstance, Ref, ComputedRef, VNode } from 'vue'
 import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf } from './component'
 import { VxeFormItemProps, VxeFormItemPropTypes } from './form-item'
 
@@ -16,6 +16,7 @@ export interface VxeFormConstructor extends VxeComponentBase, VxeFormMethods {
   reactData: FormReactData;
   internalData: FormInternalData;
   getRefMaps(): FormPrivateRef;
+  getComputeMaps(): FormPrivateComputed;
   renderVN: RenderFunction;
 }
 
@@ -24,6 +25,13 @@ export interface FormPrivateRef {
 }
 export interface VxeFormPrivateRef extends FormPrivateRef { }
 
+export interface FormPrivateComputed {
+  computeSize: ComputedRef<VxeFormPropTypes.Size>;
+  computeValidOpts: ComputedRef<VxeFormPropTypes.ValidOpts>;
+  computeTooltipOpts: ComputedRef<VxeFormPropTypes.TooltipOpts>;
+}
+export interface VxeFormPrivateComputed extends FormPrivateComputed { }
+
 export interface FormReactData {
   collapseAll: boolean;
   staticItems: any[];
@@ -40,6 +48,8 @@ export interface FormInternalData {
 }
 
 export type VxeFormEmits = [
+  'update:collapseStatus',
+  'collapse',
   'toggle-collapse',
   'submit',
   'submit-invalid',
@@ -48,6 +58,7 @@ export type VxeFormEmits = [
 
 export namespace VxeFormPropTypes {
   export type Size = SizeType;
+  export type CollapseStatus = boolean;
   export type Loading = boolean;
   export type Data = any;
   export type Span = string | number;
@@ -91,10 +102,13 @@ export namespace VxeFormPropTypes {
     leaveMethod?: (params: { $event: Event }) => boolean;
   }
   export interface TooltipOpts extends TooltipConfig { }
+
+  export type CustomLayout = boolean;
 }
 
 export type VxeFormProps<D = any> = {
   size?: VxeFormPropTypes.Size;
+  collapseStatus?: VxeFormPropTypes.CollapseStatus;
   loading?: VxeFormPropTypes.Loading;
   data?: D;
   span?: VxeFormPropTypes.Span;
@@ -110,6 +124,7 @@ export type VxeFormProps<D = any> = {
   preventSubmit?: VxeFormPropTypes.PreventSubmit;
   validConfig?: VxeFormPropTypes.ValidConfig;
   tooltipConfig?: VxeFormPropTypes.TooltipConfig;
+  customLayout?: VxeFormPropTypes.CustomLayout;
 }
 
 export interface FormMethods {
@@ -154,7 +169,14 @@ export interface FormMethods {
 }
 export interface VxeFormMethods extends FormMethods { }
 
-export interface FormPrivateMethods { }
+export interface FormPrivateMethods {
+  callSlot<T>(slotFunc: ((params: T) => any[]) | string | null, params: T): VNode[];
+  toggleCollapseEvent(evnt: Event): void;
+  triggerHeaderHelpEvent(evnt: MouseEvent, params: {
+    item: VxeFormDefines.ItemInfo;
+  }): void;
+  handleTargetLeaveEvent(): void;
+}
 export interface VxeFormPrivateMethods extends FormPrivateMethods { }
 
 export namespace VxeFormDefines {
@@ -239,35 +261,35 @@ export namespace VxeFormDefines {
     data: any;
   }
 
-  export interface ToggleCollapseParams extends FormBaseParams { }
-  export interface ToggleCollapseEventParams extends FormEventParams, ToggleCollapseParams { }
+  export interface CollapseParams extends FormBaseParams { }
+  export interface CollapseEventParams extends FormEventParams, CollapseParams { }
 
   export interface SubmitParams extends FormBaseParams { }
-  export interface SubmitEventParams extends FormEventParams, ToggleCollapseParams { }
+  export interface SubmitEventParams extends FormEventParams, SubmitParams { }
 
   export interface SubmitInvalidParams extends FormBaseParams { }
-  export interface SubmitInvalidEventParams extends FormEventParams, ToggleCollapseParams { }
+  export interface SubmitInvalidEventParams extends FormEventParams, SubmitInvalidParams { }
 
   export interface ResetParams extends FormBaseParams { }
-  export interface ResetEventParams extends FormEventParams, ToggleCollapseParams { }
+  export interface ResetEventParams extends FormEventParams, ResetParams { }
 }
 
 export type VxeFormEventProps = {
-  onToggleCollapse?: VxeFormEvents.ToggleCollapse;
+  onCollapse?: VxeFormEvents.Collapse;
   onSubmit?: VxeFormEvents.Submit;
   onSubmitInvalid?: VxeFormEvents.SubmitInvalid;
   onReset?: VxeFormEvents.Reset;
 }
 
 export interface VxeFormListeners {
-  toggleCollapse?: VxeFormEvents.ToggleCollapse;
+  collapse?: VxeFormEvents.Collapse;
   submit?: VxeFormEvents.Submit;
   submitInvalid?: VxeFormEvents.SubmitInvalid;
   reset?: VxeFormEvents.Reset;
 }
 
 export namespace VxeFormEvents {
-  export type ToggleCollapse = (params: VxeFormDefines.ToggleCollapseEventParams) => void;
+  export type Collapse = (params: VxeFormDefines.CollapseEventParams) => void;
   export type Submit = (params: VxeFormDefines.SubmitEventParams) => void;
   export type SubmitInvalid = (params: VxeFormDefines.SubmitInvalidEventParams) => void;
   export type Reset = (params: VxeFormDefines.ResetEventParams) => void;
diff --git a/types/grid.d.ts b/types/grid.d.ts
index 7670d5cd6..6a75dfa67 100644
--- a/types/grid.d.ts
+++ b/types/grid.d.ts
@@ -67,6 +67,7 @@ export type VxeGridEmits = [
   'form-submit',
   'form-submit-invalid',
   'form-reset',
+  'form-collapse',
   'form-toggle-collapse',
   'toolbar-button-click',
   'toolbar-tool-click',
@@ -303,7 +304,7 @@ export namespace VxeGridDefines {
   export interface FormSubmitEventParams extends GridEventParams, VxeFormDefines.SubmitEventParams { }
   export interface FormSubmitInvalidEventParams extends GridEventParams, VxeFormDefines.SubmitInvalidParams { }
   export interface FormResetEventParams extends GridEventParams, VxeFormDefines.ResetEventParams { }
-  export interface FormToggleCollapseEventParams extends GridEventParams, VxeFormDefines.ToggleCollapseEventParams { }
+  export interface FormCollapseEventParams extends GridEventParams, VxeFormDefines.CollapseEventParams { }
 
   export interface ToolbarButtonClickParams {
     code: string;
@@ -364,7 +365,7 @@ export interface VxeGridEventProps {
   onFormSubmit?: VxeGridEvents.FormSubmit;
   onFormSubmitInvalid?: VxeGridEvents.FormSubmitInvalid;
   onFormReset?: VxeGridEvents.FormReset;
-  onFormToggleCollapse?: VxeGridEvents.FormToggleCollapse;
+  onFormCollapse?: VxeGridEvents.FormCollapse;
   onToolbarButtonClick?: VxeGridEvents.ToolbarButtonClick;
   onToolbarToolClick?: VxeGridEvents.ToolbarToolClick;
   onZoom?: VxeGridEvents.Zoom;
@@ -411,7 +412,7 @@ export interface VxeGridListeners {
   formSubmit?: VxeGridEvents.FormSubmit;
   formSubmitInvalid?: VxeGridEvents.FormSubmitInvalid;
   formReset?: VxeGridEvents.FormReset;
-  formToggleCollapse?: VxeGridEvents.FormToggleCollapse;
+  formCollapse?: VxeGridEvents.FormCollapse;
   toolbarButtonClick?: VxeGridEvents.ToolbarButtonClick;
   toolbarToolClick?: VxeGridEvents.ToolbarToolClick;
   zoom?: VxeGridEvents.Zoom;
@@ -457,7 +458,7 @@ export namespace VxeGridEvents {
   export type FormSubmit = (params: VxeGridDefines.FormSubmitEventParams) => void;
   export type FormSubmitInvalid = (params: VxeGridDefines.FormSubmitInvalidEventParams) => void;
   export type FormReset = (params: VxeGridDefines.FormResetEventParams) => void;
-  export type FormToggleCollapse = (params: VxeGridDefines.FormToggleCollapseEventParams) => void;
+  export type FormCollapse = (params: VxeGridDefines.FormCollapseEventParams) => void;
   export type ToolbarButtonClick = (params: VxeGridDefines.ToolbarButtonClickEventParams) => void;
   export type ToolbarToolClick = (params: VxeGridDefines.ToolbarToolClickEventParams) => void;
   export type Zoom = (params: VxeGridDefines.ZoomEventParams) => void;