From 55fb0bb6fa207b6110c5ddb6876777146cc4bbd2 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Tue, 5 Oct 2021 17:38:28 +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.js                 |  32 +-
 examples/api/grid.js                 |  14 +-
 examples/api/table.js                |   4 +-
 examples/views/form/Form.vue         | 976 ++++++++++++++-------------
 examples/views/table/start/Theme.vue |  17 +-
 examples/views/textarea/Textarea.vue |   4 +-
 helper/vetur/attributes.json         |   8 +
 helper/vetur/tags.json               |   2 +
 package.json                         |   4 +-
 packages/form/src/form-gather.js     |  10 +
 packages/form/src/form-item.js       | 102 ++-
 packages/form/src/form.js            | 156 ++---
 packages/form/src/render.js          |  79 +++
 packages/grid/src/grid.js            |   7 +-
 packages/table/src/body.js           |  16 +-
 styles/variable.scss                 | 386 +++++------
 16 files changed, 1024 insertions(+), 793 deletions(-)
 create mode 100644 packages/form/src/render.js

diff --git a/examples/api/form.js b/examples/api/form.js
index 9858abe36..c6647247d 100644
--- a/examples/api/form.js
+++ b/examples/api/form.js
@@ -113,6 +113,24 @@ const apis = [
         defVal: '',
         list: []
       },
+      {
+        name: 'collapse-status',
+        desc: 'v-model 绑定值，折叠状态',
+        version: '3.3.14',
+        type: 'boolean',
+        enum: '',
+        defVal: 'true',
+        list: []
+      },
+      {
+        name: 'custom-layout',
+        desc: '是否使用自定义布局',
+        version: '3.3.14',
+        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: '3.3.14',
+        type: '',
+        enum: '',
+        defVal: '{ status, data, $event }',
         list: []
       }
     ]
diff --git a/examples/api/grid.js b/examples/api/grid.js
index 8e315e6b0..2a7a738b1 100644
--- a/examples/api/grid.js
+++ b/examples/api/grid.js
@@ -525,11 +525,21 @@ const apis = [
       },
       {
         name: 'form-toggle-collapse',
-        desc: '只对 form-config 配置时有效，当折叠按钮被手动点击时会触发该事件',
+        desc: '即将废弃，请使用 form-collapse',
+        disabled: true,
         version: '',
         type: '',
         enum: '',
-        defVal: '{ collapse, data, $event }',
+        defVal: '{ status, data, $event }',
+        list: []
+      },
+      {
+        name: 'form-collapse',
+        desc: '只对 form-config 配置时有效，当折叠按钮被手动点击时会触发该事件',
+        version: '3.3.14',
+        type: '',
+        enum: '',
+        defVal: '{ status, data, $event }',
         list: []
       },
       {
diff --git a/examples/api/table.js b/examples/api/table.js
index 786f8d666..10d24d9e9 100644
--- a/examples/api/table.js
+++ b/examples/api/table.js
@@ -3133,7 +3133,7 @@ const apis = [
         version: '',
         type: '',
         enum: '',
-        defVal: '{ type, scrollTop, scrollLeft, isX, isY, $event }',
+        defVal: '{ type, scrollTop, scrollLeft, bodyWidth, bodyHeight, isX, isY, $event }',
         list: []
       },
       {
@@ -3431,7 +3431,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 28f90b5c9..0bbf491ca 100644
--- a/examples/views/form/Form.vue
+++ b/examples/views/form/Form.vue
@@ -3,181 +3,193 @@
     <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="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">默认尺寸</vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-      <vxe-form :data="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">中等尺寸</vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-      <vxe-form :data="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">小型尺寸</vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-      <vxe-form :data="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">超小尺寸</vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-    </p>
+    <vxe-form :data="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">默认尺寸</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+    <vxe-form :data="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">中等尺寸</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+    <vxe-form :data="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">小型尺寸</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+    <vxe-form :data="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">超小尺寸</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
 
-    <p>
-      <vxe-form
-        title-colon
-        ref="xForm"
-        title-align="right"
-        title-width="100"
-        :data="formData2"
-        :rules="formRules2"
-        :loading="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 @input="$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="params">
-              <vxe-input v-model="params.data.date" type="date" placeholder="请选择日期" clearable @change="$refs.xForm.updateStatus(params)"></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="params">
-              <vxe-textarea v-model="params.data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
-            </template>
-          </vxe-form-item>
-        </vxe-form-gather>
-        <vxe-form-item align="center" span="24" :item-render="{}">
-          <template #default>
-            <vxe-button type="submit" status="primary">基本表单</vxe-button>
-            <vxe-button type="reset">重置</vxe-button>
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-    </p>
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
 
-    <p>
-      <vxe-form :data="formData3" title-align="right" title-width="100" prevent-submit title-colon>
-        <vxe-form-item title="名称" field="name" span="8" :item-render="{}">
+    <pre>
+      <pre-code class="html">{{ demoCodes[0] }}</pre-code>
+      <pre-code class="javascript">{{ demoCodes[1] }}</pre-code>
+    </pre>
+
+    <vxe-form
+      title-colon
+      ref="xForm"
+      title-align="right"
+      title-width="100"
+      :data="formData2"
+      :rules="formRules2"
+      :loading="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" span="8" :item-render="{}" :title-prefix="{ message: '请输入汉字！', icon: 'fa fa-exclamation-circle' }">
+        <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 @input="$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="params">
+            <vxe-input v-model="params.data.date" type="date" placeholder="请选择日期" clearable @change="$refs.xForm.updateStatus(params)"></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="params">
+            <vxe-textarea v-model="params.data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
+          </template>
+        </vxe-form-item>
+      </vxe-form-gather>
+      <vxe-form-item align="center" span="24" :item-render="{}">
+        <template #default>
+          <vxe-button type="submit" status="primary">基本表单</vxe-button>
+          <vxe-button type="reset">重置</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="javascript">{{ demoCodes[3] }}</pre-code>
+    </pre>
+
+    <vxe-form :collapseStatus.sync="collapseStatus3" :data="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" 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>
@@ -188,67 +200,63 @@
             </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="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" span="8" :item-render="{}" folding>
-          <template #default="{ data }">
-            <vxe-radio-group v-model="data.single">
-              <vxe-radio label="1">是</vxe-radio>
-              <vxe-radio label="0">否</vxe-radio>
-            </vxe-radio-group>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item title="兴趣爱好" field="flagList" span="8" :item-render="{}" folding>
+        <vxe-form-item title="兴趣爱好" field="flagList" :item-render="{}" folding>
           <template #default="{ data }">
             <vxe-checkbox-group v-model="data.flagList">
-              <vxe-checkbox label="1">爬山</vxe-checkbox>
-              <vxe-checkbox label="2">跑步</vxe-checkbox>
-              <vxe-checkbox label="3">听歌</vxe-checkbox>
+              <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" @click="searchEvent">手动提交方式</vxe-button>
-            <vxe-button @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="formData4" :items="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="javascript">{{ demoCodes[5] }}</pre-code>
+    </pre>
+
+    <vxe-form :data="formData4" :items="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="javascript">{{ demoCodes[7] }}</pre-code>
+    </pre>
 
     <pre>
       <pre-code>
@@ -257,13 +265,6 @@
         | Enter | （prevent-submit 不为 false）如果有存在提交按钮则提交表单 |
       </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="javascript">{{ demoCodes[1] }}</pre-code>
-    </pre>
   </div>
 </template>
 
@@ -314,6 +315,7 @@ export default {
           { required: true, message: '必填校验' }
         ]
       },
+      collapseStatus3: true,
       formData3: {
         name: '',
         nickname: '',
@@ -364,249 +366,106 @@ export default {
       ],
       demoCodes: [
         `
-        <p>
-          <vxe-form :data="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">默认尺寸</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-          <vxe-form :data="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">中等尺寸</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-          <vxe-form :data="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">小型尺寸</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-          <vxe-form :data="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">超小尺寸</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form
-            title-colon
-            ref="xForm"
-            title-align="right"
-            title-width="100"
-            :data="formData2"
-            :rules="formRules2"
-            :loading="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 @input="$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="params">
-                  <vxe-input v-model="params.data.date" type="date" placeholder="请选择日期" clearable @change="$refs.xForm.updateStatus(params)"></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="params">
-                  <vxe-textarea v-model="params.data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
-                </template>
-              </vxe-form-item>
-            </vxe-form-gather>
-            <vxe-form-item align="center" span="24" :item-render="{}">
-              <template #default>
-                <vxe-button type="submit" status="primary">基本表单</vxe-button>
-                <vxe-button type="reset">重置</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form :data="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" span="8" :item-render="{}" folding>
-              <template #default="{ data }">
-                <vxe-radio-group v-model="data.single">
-                  <vxe-radio label="1">是</vxe-radio>
-                  <vxe-radio label="0">否</vxe-radio>
-                </vxe-radio-group>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item title="兴趣爱好" field="flagList" span="8" :item-render="{}" folding>
-              <template #default="{ data }">
-                <vxe-checkbox-group v-model="data.flagList">
-                  <vxe-checkbox label="1">爬山</vxe-checkbox>
-                  <vxe-checkbox label="2">跑步</vxe-checkbox>
-                  <vxe-checkbox label="3">听歌</vxe-checkbox>
-                </vxe-checkbox-group>
-              </template>
-            </vxe-form-item>
-            <vxe-form-item align="center" span="24" collapse-node>
-              <template #default>
-                <vxe-button status="primary" @click="searchEvent">手动提交方式</vxe-button>
-                <vxe-button @click="resetEvent">重置</vxe-button>
-              </template>
-            </vxe-form-item>
-          </vxe-form>
-        </p>
-
-        <p>
-          <vxe-form :data="formData4" :items="formItems4">
-            <template #myregion="{ data }">
-              <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
+        <vxe-form :data="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">默认尺寸</vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+        <vxe-form :data="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">中等尺寸</vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+        <vxe-form :data="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">小型尺寸</vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+        <vxe-form :data="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">超小尺寸</vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
         `,
         `
         export default {
@@ -625,7 +484,70 @@ export default {
                 age: 26,
                 date: null,
                 address: '左右布局'
-              },
+              }
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form
+          title-colon
+          ref="xForm"
+          title-align="right"
+          title-width="100"
+          :data="formData2"
+          :rules="formRules2"
+          :loading="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 @input="$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="params">
+                <vxe-input v-model="params.data.date" type="date" placeholder="请选择日期" clearable @change="$refs.xForm.updateStatus(params)"></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="params">
+                <vxe-textarea v-model="params.data.address" placeholder="请输入地址" :autosize="{minRows: 6, maxRows: 10}" clearable @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
+              </template>
+            </vxe-form-item>
+          </vxe-form-gather>
+          <vxe-form-item align="center" span="24" :item-render="{}">
+            <template #default>
+              <vxe-button type="submit" status="primary">基本表单</vxe-button>
+              <vxe-button type="reset">重置</vxe-button>
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+        `,
+        `
+        export default {
+          data () {
+            return {
               formRules2: {
                 name: [
                   { required: true, message: '请输入名称' },
@@ -654,7 +576,94 @@ export default {
                 address: [
                   { required: true, message: '必填校验' }
                 ]
-              },
+              }
+            }
+          },
+          methods: {
+            submitEvent2 () {
+              this.loading2 = true
+              setTimeout(() => {
+                this.loading2 = false
+                this.$XModal.message({ message: '保存成功', status: 'success' })
+              }, 1000)
+            },
+            searchEvent () {
+              this.$XModal.message({ message: '查询事件', status: 'info' })
+            },
+            resetEvent () {
+              this.$XModal.message({ message: '重置事件', status: 'info' })
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form :collapseStatus.sync="collapseStatus3" :data="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="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>
+        `,
+        `
+        export default {
+          data () {
+            return {
+              collapseStatus3: true,
               formData3: {
                 name: '',
                 nickname: '',
@@ -667,6 +676,40 @@ export default {
                 single: '1',
                 flagList: []
               },
+              formData4: {
+                name: '',
+                nickname: '',
+                sex: '0',
+                role: '',
+                age: 22,
+                val1: [],
+                val2: false,
+                val3: '',
+                flag: false
+              }
+            }
+          },
+          methods: {
+            searchEvent () {
+              this.$XModal.message({ message: '查询事件', status: 'info' })
+            },
+            resetEvent () {
+              this.$XModal.message({ message: '重置事件', status: 'info' })
+            }
+          }
+        }
+        `,
+        `
+        <vxe-form :data="formData4" :items="formItems4">
+          <template #myregion="{ data }">
+            <vxe-input v-model="data.region" placeholder="自定义插槽模板"></vxe-input>
+          </template>
+        </vxe-form>
+        `,
+        `
+        export default {
+          data () {
+            return {
               formData4: {
                 name: '',
                 nickname: '',
@@ -704,24 +747,9 @@ export default {
                 { align: 'center', span: 24, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '配置式表单', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
               ]
             }
-          },
-          methods: {
-            submitEvent2 () {
-              this.loading2 = true
-              setTimeout(() => {
-                this.loading2 = false
-                this.$XModal.message({ message: '保存成功', status: 'success' })
-              }, 1000)
-            },
-            searchEvent () {
-              this.$XModal.message({ message: '查询事件', status: 'info' })
-            },
-            resetEvent () {
-              this.$XModal.message({ message: '重置事件', status: 'info' })
-            }
           }
         }
-        `
+      `
       ]
     }
   },
diff --git a/examples/views/table/start/Theme.vue b/examples/views/table/start/Theme.vue
index c779ddc99..c716ef94b 100644
--- a/examples/views/table/start/Theme.vue
+++ b/examples/views/table/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/examples/views/textarea/Textarea.vue b/examples/views/textarea/Textarea.vue
index 3407003fb..ace290c90 100644
--- a/examples/views/textarea/Textarea.vue
+++ b/examples/views/textarea/Textarea.vue
@@ -16,7 +16,7 @@
       <vxe-textarea v-model="value7" placeholder="禁用的" disabled></vxe-textarea>
       <vxe-textarea v-model="value8" placeholder="显示字数统计" maxlength="100" show-word-count></vxe-textarea>
       <vxe-textarea v-model="value9" placeholder="自适应文本高度" :autosize="{ minRows: 2, maxRows: 4 }"></vxe-textarea>
-      <vxe-textarea v-model="value10" placeholder="默认3行与40列"></vxe-textarea>
+      <vxe-textarea v-model="value10" placeholder="默认3行与40列" rows="3" cols="40"></vxe-textarea>
       <vxe-textarea v-model="value11" placeholder="关闭调节元素" resize="none"></vxe-textarea>
       <vxe-textarea v-model="value12" placeholder="可以调节元素的高度" resize="vertical"></vxe-textarea>
       <vxe-textarea v-model="value13" placeholder="以调节元素的宽度" resize="horizontal"></vxe-textarea>
@@ -72,7 +72,7 @@ export default {
           <vxe-textarea v-model="value7" placeholder="禁用的" disabled></vxe-textarea>
           <vxe-textarea v-model="value8" placeholder="显示字数统计" maxlength="100" show-word-count></vxe-textarea>
           <vxe-textarea v-model="value9" placeholder="自适应文本高度" :autosize="{ minRows: 2, maxRows: 4 }"></vxe-textarea>
-          <vxe-textarea v-model="value10" placeholder="默认3行与40列"></vxe-textarea>
+          <vxe-textarea v-model="value10" placeholder="默认3行与40列" rows="3" cols="40"></vxe-textarea>
           <vxe-textarea v-model="value11" placeholder="关闭调节元素" resize="none"></vxe-textarea>
           <vxe-textarea v-model="value12" placeholder="可以调节元素的高度" resize="vertical"></vxe-textarea>
           <vxe-textarea v-model="value13" placeholder="以调节元素的宽度" resize="horizontal"></vxe-textarea>
diff --git a/helper/vetur/attributes.json b/helper/vetur/attributes.json
index a72a6075a..2745414a7 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 d072fe2a7..e0bbc4b9a 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 1d1d649fa..2a59066c5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.3.14-beta.0",
+  "version": "3.3.14-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -88,7 +88,7 @@
     "vxe-table-plugin-virtual-tree": "0.6.10",
     "xe-ajax": "^4.0.5",
     "xe-clipboard": "^1.10.1",
-    "xe-utils": "^3.3.4",
+    "xe-utils": "^3.4.0",
     "xlsx": "^0.17.0"
   },
   "peerDependencies": {
diff --git a/packages/form/src/form-gather.js b/packages/form/src/form-gather.js
index d34125fd6..7a6dda7b8 100644
--- a/packages/form/src/form-gather.js
+++ b/packages/form/src/form-gather.js
@@ -1,4 +1,5 @@
 import VxeFormItem from './form-item'
+import { UtilTools } from '../../tools'
 
 export default {
   name: 'VxeFormGather',
@@ -8,6 +9,15 @@ export default {
       xeformgather: this
     }
   },
+  created () {
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      this.$nextTick(() => {
+        if (this.$xeform && this.$xeform.customLayout) {
+          UtilTools.error('vxe.error.errConflicts', ['custom-layout', '<form-gather ...>'])
+        }
+      })
+    }
+  },
   render (h) {
     return h('div', this.$slots.default)
   }
diff --git a/packages/form/src/form-item.js b/packages/form/src/form-item.js
index 952e6169b..c15062f95 100644
--- a/packages/form/src/form-item.js
+++ b/packages/form/src/form-item.js
@@ -1,4 +1,9 @@
+import XEUtils from 'xe-utils'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import VXETable from '../../v-x-e-table'
+import { UtilTools, isEnableConf } from '../../tools'
 import { createItem, destroyItem, assemItem } from './util'
+import { renderTitle } from './render'
 
 const props = {
   title: String,
@@ -27,6 +32,100 @@ Object.keys(props).forEach(name => {
   }
 })
 
+const renderItem = (h, _vm, item, slots) => {
+  const { rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
+  const { title, folding, visible, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
+  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+  const span = item.span || _vm.span
+  const align = item.align || _vm.align
+  const titleAlign = item.titleAlign || _vm.titleAlign
+  const titleWidth = item.titleWidth || _vm.titleWidth
+  let itemVisibleMethod = visibleMethod
+  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
+  const params = { data, property: field, item, $form: _vm }
+  let isRequired
+  if (!itemVisibleMethod && compConf && compConf.itemVisibleMethod) {
+    itemVisibleMethod = compConf.itemVisibleMethod
+  }
+  if (rules) {
+    const itemRules = rules[field]
+    if (itemRules) {
+      isRequired = itemRules.some(rule => rule.required)
+    }
+  }
+  let contentVNs = []
+  if (slots && slots.default) {
+    contentVNs = _vm.callSlot(slots.default, params, h)
+  } else if (compConf && compConf.renderItemContent) {
+    contentVNs = compConf.renderItemContent.call(_vm, h, itemRender, params)
+  } else if (compConf && compConf.renderItem) {
+    contentVNs = compConf.renderItem.call(_vm, h, itemRender, params)
+  } else if (field) {
+    contentVNs = [`${XEUtils.get(data, field)}`]
+  }
+  const ons = showTooltip ? {
+    mouseenter (evnt) {
+      _vm.triggerHeaderHelpEvent(evnt, params)
+    },
+    mouseleave: _vm.handleTargetLeaveEvent
+  } : {}
+  return h('div', {
+    class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : null, 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 || (slots && slots.title) ? h('div', {
+        class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : null, {
+          'is--ellipsis': hasEllipsis
+        }],
+        style: titleWidth ? {
+          width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+        } : null,
+        attrs: {
+          title: showTitle ? UtilTools.getFuncText(title) : null
+        },
+        on: ons
+      }, renderTitle(h, _vm, item)) : null,
+      h('div', {
+        class: ['vxe-form--item-content', align ? `align--${align}` : null]
+      }, contentVNs.concat(
+        [
+          collapseNode ? h('div', {
+            class: 'vxe-form--item-trigger-node',
+            on: {
+              click: _vm.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]
+            })
+          ]) : null,
+          errRule && validOpts.showMessage ? h('div', {
+            class: 'vxe-form--item-valid',
+            style: errRule.maxWidth ? {
+              width: `${errRule.maxWidth}px`
+            } : null
+          }, errRule.message) : null
+        ])
+      )
+    ])
+  ])
+}
+
 export default {
   name: 'VxeFormItem',
   props,
@@ -49,6 +148,7 @@ export default {
     destroyItem(this)
   },
   render (h) {
-    return h('div')
+    const { $xeform } = this
+    return $xeform && $xeform.customLayout ? renderItem(h, $xeform, this.itemConfig, this.$scopedSlots) : h('div')
   }
 }
diff --git a/packages/form/src/form.js b/packages/form/src/form.js
index 67cf83e08..ee982f660 100644
--- a/packages/form/src/form.js
+++ b/packages/form/src/form.js
@@ -2,8 +2,9 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import vSize from '../../mixins/size'
 import VXETable from '../../v-x-e-table'
-import { UtilTools, isEnableConf } from '../../tools'
+import { UtilTools, DomTools, isEnableConf } from '../../tools'
 import { createItem } from './util'
+import { renderTitle } from './render'
 import { eqEmptyValue } from '../../tools/src/utils'
 import { browse } from '../../tools/src/dom'
 
@@ -57,95 +58,6 @@ function getResetValue (value, resetValue) {
   return resetValue
 }
 
-function callSlot (_vm, slotFunc, params, h) {
-  if (slotFunc) {
-    const { $scopedSlots } = _vm
-    if (XEUtils.isString(slotFunc)) {
-      slotFunc = $scopedSlots[slotFunc] || null
-    }
-    if (XEUtils.isFunction(slotFunc)) {
-      return slotFunc.call(_vm, params, h)
-    }
-  }
-  return []
-}
-
-function renderPrefixIcon (h, titlePrefix) {
-  return h('span', {
-    class: 'vxe-form--item-title-prefix'
-  }, [
-    h('i', {
-      class: titlePrefix.icon || GlobalConfig.icon.FORM_PREFIX
-    })
-  ])
-}
-
-function renderSuffixIcon (h, titleSuffix) {
-  return h('span', {
-    class: 'vxe-form--item-title-suffix'
-  }, [
-    h('i', {
-      class: titleSuffix.icon || GlobalConfig.icon.FORM_SUFFIX
-    })
-  ])
-}
-
-function renderTitle (h, _vm, item) {
-  const { data } = _vm
-  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
-  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
-  const params = { data, property: field, item, $form: _vm }
-  const contVNs = []
-  const titVNs = []
-  if (titlePrefix) {
-    titVNs.push(
-      titlePrefix.message
-        ? h('vxe-tooltip', {
-          props: {
-            content: UtilTools.getFuncText(titlePrefix.message),
-            enterable: titlePrefix.enterable,
-            theme: titlePrefix.theme
-          }
-        }, [
-          renderPrefixIcon(h, titlePrefix)
-        ])
-        : renderPrefixIcon(h, titlePrefix)
-    )
-  }
-  titVNs.push(
-    h('span', {
-      class: 'vxe-form--item-title-label'
-    }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (slots && slots.title ? callSlot(_vm, slots.title, params, h) : UtilTools.getFuncText(item.title)))
-  )
-  contVNs.push(
-    h('div', {
-      class: 'vxe-form--item-title-content'
-    }, titVNs)
-  )
-  const fixVNs = []
-  if (titleSuffix) {
-    fixVNs.push(
-      titleSuffix.message
-        ? h('vxe-tooltip', {
-          props: {
-            content: UtilTools.getFuncText(titleSuffix.message),
-            enterable: titleSuffix.enterable,
-            theme: titleSuffix.theme
-          }
-        }, [
-          renderSuffixIcon(h, titleSuffix)
-        ])
-        : renderSuffixIcon(h, titleSuffix)
-    )
-  }
-  contVNs.push(
-    h('div', {
-      class: 'vxe-form--item-title-postfix'
-    }, fixVNs)
-  )
-  return contVNs
-}
-
 function renderItems (h, _vm, itemList) {
   const { _e, rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
   return itemList.map((item, index) => {
@@ -185,7 +97,7 @@ function renderItems (h, _vm, itemList) {
     }
     let contentVNs = []
     if (slots && slots.default) {
-      contentVNs = callSlot(_vm, slots.default, params, h)
+      contentVNs = _vm.callSlot(slots.default, params, h)
     } else if (compConf && compConf.renderItemContent) {
       contentVNs = compConf.renderItemContent.call(_vm, h, itemRender, params)
     } else if (compConf && compConf.renderItem) {
@@ -258,6 +170,7 @@ export default {
   name: 'VxeForm',
   mixins: [vSize],
   props: {
+    collapseStatus: { type: Boolean, default: true },
     loading: Boolean,
     data: Object,
     size: { type: String, default: () => GlobalConfig.form.size || GlobalConfig.size },
@@ -272,11 +185,12 @@ export default {
     items: Array,
     rules: Object,
     preventSubmit: { type: Boolean, default: () => GlobalConfig.form.preventSubmit },
-    validConfig: Object
+    validConfig: Object,
+    customLayout: { type: Boolean, default: () => GlobalConfig.form.customLayout }
   },
   data () {
     return {
-      collapseAll: true,
+      collapseAll: this.collapseStatus,
       staticItems: [],
       formItems: [],
 
@@ -305,24 +219,32 @@ export default {
       return opts
     }
   },
-  created () {
-    this.$nextTick(() => {
-      const { items } = this
-      if (items) {
-        this.loadItem(items)
-      }
-    })
-  },
   watch: {
     staticItems (value) {
       this.formItems = value
     },
     items (value) {
       this.loadItem(value)
+    },
+    collapseStatus (value) {
+      this.collapseAll = !!value
     }
   },
+  created () {
+    this.$nextTick(() => {
+      const { items } = this
+      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+        if (this.customLayout && this.items) {
+          UtilTools.error('vxe.error.errConflicts', ['custom-layout', 'items'])
+        }
+      }
+      if (items) {
+        this.loadItem(items)
+      }
+    })
+  },
   render (h) {
-    const { _e, loading, className, data, vSize, tooltipOpts, formItems } = this
+    const { _e, loading, className, data, vSize, tooltipOpts, formItems, customLayout } = this
     const hasUseTooltip = VXETable._tooltip
     return h('form', {
       class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: this }) : className) : '', {
@@ -338,11 +260,11 @@ export default {
     }, [
       h('div', {
         class: 'vxe-form--wrapper vxe-row'
-      }, renderItems(h, this, formItems)),
+      }, customLayout ? this.$slots.default : renderItems(h, this, formItems)),
       h('div', {
         class: 'vxe-form-slots',
         ref: 'hideItem'
-      }, this.$slots.default),
+      }, customLayout ? [] : this.$slots.default),
       h('div', {
         class: ['vxe-loading', {
           'is--visible': loading
@@ -362,6 +284,18 @@ export default {
     ])
   },
   methods: {
+    callSlot (slotFunc, params, h) {
+      if (slotFunc) {
+        const { $scopedSlots } = this
+        if (XEUtils.isString(slotFunc)) {
+          slotFunc = $scopedSlots[slotFunc] || null
+        }
+        if (XEUtils.isFunction(slotFunc)) {
+          return slotFunc.call(this, params, h)
+        }
+      }
+      return []
+    },
     loadItem (list) {
       if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
         const { $scopedSlots } = this
@@ -388,12 +322,16 @@ export default {
       return itemList
     },
     toggleCollapse () {
-      this.collapseAll = !this.collapseAll
+      const status = !this.collapseAll
+      this.collapseAll = status
+      this.$emit('update:collapseStatus', status)
       return this.$nextTick()
     },
     toggleCollapseEvent (evnt) {
       this.toggleCollapse()
-      this.$emit('toggle-collapse', { collapse: !this.collapseAll, data: this.data, $form: this, $event: evnt }, evnt)
+      const status = this.collapseAll
+      this.$emit('toggle-collapse', { status, collapse: status, data: this.data, $form: this, $event: evnt }, evnt)
+      this.$emit('collapse', { status, collapse: status, data: this.data, $form: this, $event: evnt }, evnt)
     },
     submitEvent (evnt) {
       evnt.preventDefault()
@@ -631,12 +569,16 @@ export default {
     handleFocus (fields) {
       const { $el } = this
       const itemList = this.getItems()
-      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
+          // 定位到第一个
+          if (!index) {
+            DomTools.scrollToView($el.querySelector(`.${item.id}`))
+          }
           // 如果指定了聚焦 class
           if (itemRender.autofocus) {
             inputElem = $el.querySelector(`.${item.id} ${itemRender.autofocus}`)
diff --git a/packages/form/src/render.js b/packages/form/src/render.js
new file mode 100644
index 000000000..6ba242df1
--- /dev/null
+++ b/packages/form/src/render.js
@@ -0,0 +1,79 @@
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import VXETable from '../../v-x-e-table'
+import { UtilTools, isEnableConf } from '../../tools'
+
+function renderPrefixIcon (h, titlePrefix) {
+  return h('span', {
+    class: 'vxe-form--item-title-prefix'
+  }, [
+    h('i', {
+      class: titlePrefix.icon || GlobalConfig.icon.FORM_PREFIX
+    })
+  ])
+}
+
+function renderSuffixIcon (h, titleSuffix) {
+  return h('span', {
+    class: 'vxe-form--item-title-suffix'
+  }, [
+    h('i', {
+      class: titleSuffix.icon || GlobalConfig.icon.FORM_SUFFIX
+    })
+  ])
+}
+
+export function renderTitle (h, _vm, item) {
+  const { data } = _vm
+  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
+  const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+  const params = { data, property: field, item, $form: _vm }
+  const contVNs = []
+  const titVNs = []
+  if (titlePrefix) {
+    titVNs.push(
+      titlePrefix.message
+        ? h('vxe-tooltip', {
+          props: {
+            content: UtilTools.getFuncText(titlePrefix.message),
+            enterable: titlePrefix.enterable,
+            theme: titlePrefix.theme
+          }
+        }, [
+          renderPrefixIcon(h, titlePrefix)
+        ])
+        : renderPrefixIcon(h, titlePrefix)
+    )
+  }
+  titVNs.push(
+    h('span', {
+      class: 'vxe-form--item-title-label'
+    }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (slots && slots.title ? _vm.callSlot(slots.title, params, h) : UtilTools.getFuncText(item.title)))
+  )
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs)
+  )
+  const fixVNs = []
+  if (titleSuffix) {
+    fixVNs.push(
+      titleSuffix.message
+        ? h('vxe-tooltip', {
+          props: {
+            content: UtilTools.getFuncText(titleSuffix.message),
+            enterable: titleSuffix.enterable,
+            theme: titleSuffix.theme
+          }
+        }, [
+          renderSuffixIcon(h, titleSuffix)
+        ])
+        : renderSuffixIcon(h, titleSuffix)
+    )
+  }
+  contVNs.push(
+    h('div', {
+      class: 'vxe-form--item-title-postfix'
+    }, fixVNs)
+  )
+  return contVNs
+}
diff --git a/packages/grid/src/grid.js b/packages/grid/src/grid.js
index 127a22bc2..bbef4c998 100644
--- a/packages/grid/src/grid.js
+++ b/packages/grid/src/grid.js
@@ -40,8 +40,8 @@ function renderDefaultForm (h, _vm) {
         on: {
           submit: _vm.submitEvent,
           reset: _vm.resetEvent,
-          'submit-invalid': _vm.submitInvalidEvent,
-          'toggle-collapse': _vm.togglCollapseEvent
+          collapse: _vm.collapseEvent,
+          'submit-invalid': _vm.submitInvalidEvent
         },
         scopedSlots: formSlots
       })
@@ -819,9 +819,10 @@ export default {
     submitInvalidEvent (params) {
       this.$emit('form-submit-invalid', Object.assign({ $grid: this }, params))
     },
-    togglCollapseEvent (params) {
+    collapseEvent (params) {
       this.$nextTick(() => this.recalculate(true))
       this.$emit('form-toggle-collapse', Object.assign({ $grid: this }, params))
+      this.$emit('form-collapse', Object.assign({ $grid: this }, params))
     },
     triggerZoomEvent (evnt) {
       this.zoom()
diff --git a/packages/table/src/body.js b/packages/table/src/body.js
index acbee4d63..479f47995 100644
--- a/packages/table/src/body.js
+++ b/packages/table/src/body.js
@@ -574,13 +574,17 @@ export default {
      */
     scrollEvent (evnt) {
       const { $el: scrollBodyElem, $parent: $xetable, fixedType } = this
-      const { $refs, highlightHoverRow, scrollXLoad, scrollYLoad, lastScrollTop, lastScrollLeft } = $xetable
+      const { $refs, elemStore, highlightHoverRow, scrollXLoad, scrollYLoad, lastScrollTop, lastScrollLeft } = $xetable
       const { tableHeader, tableBody, leftBody, rightBody, tableFooter, validTip } = $refs
       const headerElem = tableHeader ? tableHeader.$el : null
       const footerElem = tableFooter ? tableFooter.$el : null
       const bodyElem = tableBody.$el
       const leftElem = leftBody ? leftBody.$el : null
       const rightElem = rightBody ? rightBody.$el : 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
@@ -622,16 +626,20 @@ export default {
       if (isRollX && validTip && validTip.visible) {
         validTip.updatePlacement()
       }
-      $xetable.emitEvent('scroll', { type: renderType, fixed: fixedType, scrollTop, scrollLeft, isX: isRollX, isY: isRollY }, evnt)
+      $xetable.emitEvent('scroll', { type: renderType, fixed: fixedType, scrollTop, scrollLeft, bodyHeight, bodyWidth, isX: isRollX, isY: isRollY }, evnt)
     },
     handleWheel (evnt, isTopWheel, deltaTop, isRollX, isRollY) {
       const { $parent: $xetable } = this
-      const { $refs } = $xetable
+      const { $refs, elemStore } = $xetable
       const { tableBody, leftBody, rightBody } = $refs
       const bodyElem = tableBody.$el
       const leftElem = leftBody ? leftBody.$el : null
       const rightElem = rightBody ? rightBody.$el : null
       const remainSize = this.isPrevWheelTop === isTopWheel ? Math.max(0, this.wheelYSize - this.wheelYTotal) : 0
+      const bodyYElem = elemStore['main-body-ySpace']
+      const bodyXElem = elemStore['main-body-xSpace']
+      const bodyHeight = bodyYElem ? bodyYElem.clientHeight : 0
+      const bodyWidth = bodyXElem ? bodyXElem.clientWidth : 0
       this.isPrevWheelTop = isTopWheel
       this.wheelYSize = Math.abs(isTopWheel ? deltaTop - remainSize : deltaTop + remainSize)
       this.wheelYInterval = 0
@@ -659,7 +667,7 @@ export default {
           }
           this.wheelYTotal = wheelYTotal
           this.wheelYInterval = wheelYInterval
-          $xetable.emitEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft: bodyElem.scrollLeft, isX: isRollX, isY: isRollY }, evnt)
+          $xetable.emitEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft: bodyElem.scrollLeft, bodyHeight, bodyWidth, isX: isRollX, isY: isRollY }, evnt)
         }
       }
       handleSmooth()
diff --git a/styles/variable.scss b/styles/variable.scss
index d4389966e..ffd1a3d51 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: #BFBFBF !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-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-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 !default;
+$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;