From 02b499d1705ddc836d537b5149cbffda480507a0 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Tue, 11 Aug 2020 19:27:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dgrid=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E7=9A=84=E8=BF=9C=E7=A8=8B=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E6=9C=AA=E9=87=8D=E7=BD=AE=E4=B8=BA=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E9=A1=B5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/api/button.js                     |   2 +-
 examples/api/checkbox.js                   |   2 +-
 examples/api/input.js                      |  11 +-
 examples/api/list.js                       |   2 +-
 examples/api/pager.js                      |   2 +-
 examples/api/pulldown.js                   |   2 +-
 examples/api/radio.js                      |   2 +-
 examples/api/select.js                     |  11 +-
 examples/api/switch.js                     |   2 +-
 examples/api/textarea.js                   |   2 +-
 examples/api/toolbar.js                    |   2 +-
 examples/views/api/API.vue                 |  86 +++----
 examples/views/table/base/Tooltip.vue      |   9 +-
 examples/views/table/grid/FullEdit.vue     |  18 +-
 examples/views/table/grid/FullQuery.vue    |  30 +--
 examples/views/table/grid/TreeEdit.vue     |   2 +
 examples/views/table/grid/TreeLazyEdit.vue |   2 +
 examples/views/table/start/Global.vue      |   3 +-
 examples/views/table/tree/Basic.vue        |   2 +
 examples/views/table/tree/CellValid.vue    |   2 +
 examples/views/table/tree/Edit.vue         |   2 +
 examples/views/table/tree/Insert.vue       |   2 +
 examples/views/table/tree/LazyEdit.vue     |   2 +
 examples/views/table/tree/Menu.vue         |   2 +
 examples/views/table/tree/RowValid.vue     |   2 +
 examples/views/table/tree/Toolbar.vue      |   2 +
 helper/vetur/attributes.json               |  12 +-
 helper/vetur/tags.json                     |   2 +
 packages/body/src/body.js                  |   2 +-
 packages/button/src/button.js              |   5 +-
 packages/cell/src/cell.js                  |  59 +++--
 packages/checkbox/src/checkbox.js          |   5 +-
 packages/conf/index.js                     |   8 +-
 packages/form/src/form.js                  |   5 +-
 packages/grid/src/grid.js                  |  25 +-
 packages/input/src/input.js                |   9 +-
 packages/mixins/size.js                    |   8 +
 packages/modal/src/modal.js                |   5 +-
 packages/pager/src/pager.js                |   5 +-
 packages/pulldown/src/pulldown.js          |   7 +-
 packages/radio/src/radio.js                |   5 +-
 packages/select/src/select.js              |  15 +-
 packages/switch/src/switch.js              |   5 +-
 packages/table/src/methods.js              |  46 ++--
 packages/table/src/table.js                |   7 +-
 packages/textarea/src/textarea.js          |   5 +-
 packages/toolbar/src/toolbar.js            |   5 +-
 packages/tooltip/src/tooltip.js            |  68 +++---
 styles/button.scss                         |   2 +
 styles/footer.scss                         |  16 +-
 styles/input.scss                          | 252 +++++++++++----------
 styles/pulldown.scss                       |   2 +
 styles/select.scss                         |   2 +
 styles/table.scss                          |   3 +-
 vue.config.js                              |   4 +-
 55 files changed, 459 insertions(+), 341 deletions(-)
 create mode 100644 packages/mixins/size.js

diff --git a/examples/api/button.js b/examples/api/button.js
index 10d2cd659..6e4cf7043 100644
--- a/examples/api/button.js
+++ b/examples/api/button.js
@@ -30,7 +30,7 @@ const apis = [
         descKey: 'app.api.button.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/checkbox.js b/examples/api/checkbox.js
index 117512349..5a365a100 100644
--- a/examples/api/checkbox.js
+++ b/examples/api/checkbox.js
@@ -39,7 +39,7 @@ const apis = [
         descKey: 'app.api.checkbox.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/input.js b/examples/api/input.js
index 62285872c..e8bd3990e 100644
--- a/examples/api/input.js
+++ b/examples/api/input.js
@@ -21,7 +21,7 @@ const apis = [
         descKey: 'app.api.input.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
@@ -160,6 +160,15 @@ const apis = [
         defVal: '默认 2，继承 setup.input.digits',
         list: []
       },
+      {
+        name: 'align',
+        desc: '内容对齐方式',
+        version: '',
+        type: 'string',
+        enum: 'left, center, right',
+        defVal: 'left',
+        list: []
+      },
       {
         name: 'controls',
         desc: '只对 type=number|integer|float 有效，是否显示控制按钮',
diff --git a/examples/api/list.js b/examples/api/list.js
index b339db347..b5242550c 100644
--- a/examples/api/list.js
+++ b/examples/api/list.js
@@ -21,7 +21,7 @@ const apis = [
         descKey: 'app.api.list.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/pager.js b/examples/api/pager.js
index 492660f6d..ba05fea92 100644
--- a/examples/api/pager.js
+++ b/examples/api/pager.js
@@ -12,7 +12,7 @@ const apis = [
         descKey: 'app.api.pager.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/pulldown.js b/examples/api/pulldown.js
index c595f9182..bcc1cd31b 100644
--- a/examples/api/pulldown.js
+++ b/examples/api/pulldown.js
@@ -12,7 +12,7 @@ const apis = [
         descKey: 'app.api.pulldown.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/radio.js b/examples/api/radio.js
index 27b710b22..26c32668c 100644
--- a/examples/api/radio.js
+++ b/examples/api/radio.js
@@ -39,7 +39,7 @@ const apis = [
         descKey: 'app.api.radio.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/select.js b/examples/api/select.js
index 229d88617..c4ac5783b 100644
--- a/examples/api/select.js
+++ b/examples/api/select.js
@@ -21,7 +21,7 @@ const apis = [
         descKey: 'app.api.select.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
@@ -34,6 +34,15 @@ const apis = [
         defVal: '',
         list: []
       },
+      {
+        name: 'multi-char-overflow',
+        desc: '只对 multiple 有效，设置多选中每个选项显示值的最大字符数，如果超出显示省略号；如果为 -1 则关闭',
+        version: '',
+        type: 'number, string',
+        enum: '',
+        defVal: '默认 8，继承 setup.select.multiCharOverflow',
+        list: []
+      },
       {
         name: 'clearable',
         descKey: 'app.api.select.desc.clearable',
diff --git a/examples/api/switch.js b/examples/api/switch.js
index 4c5380b99..fbc934063 100644
--- a/examples/api/switch.js
+++ b/examples/api/switch.js
@@ -30,7 +30,7 @@ const apis = [
         descKey: 'app.api.switch.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/textarea.js b/examples/api/textarea.js
index 381543a19..ac0799a8f 100644
--- a/examples/api/textarea.js
+++ b/examples/api/textarea.js
@@ -21,7 +21,7 @@ const apis = [
         descKey: 'app.api.input.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/api/toolbar.js b/examples/api/toolbar.js
index e210f8142..a971e5fd9 100644
--- a/examples/api/toolbar.js
+++ b/examples/api/toolbar.js
@@ -12,7 +12,7 @@ const apis = [
         descKey: 'app.api.toolbar.desc.size',
         version: '',
         type: 'string',
-        enum: 'medium,small,mini',
+        enum: 'medium, small, mini',
         defVal: '继承上下文',
         list: []
       },
diff --git a/examples/views/api/API.vue b/examples/views/api/API.vue
index e03dd18b1..a7b67b33c 100644
--- a/examples/views/api/API.vue
+++ b/examples/views/api/API.vue
@@ -28,12 +28,12 @@
       @header-cell-context-menu="headerCellContextMenuEvent"
       @cell-context-menu="cellContextMenuEvent"
       @context-menu-click="contextMenuClickEvent">
-      <vxe-table-column field="name" title="app.api.title.prop" type="html" min-width="280" :filters="nameFilters" tree-node></vxe-table-column>
+      <vxe-table-column field="name" title="app.api.title.prop" type="html" min-width="280" :title-help="{message: '参数名称及使用，如果是在 CDN 环境中使用 kebab-case（短横线式），如果项目基于 vue-cli 脚手架可以使用 camelCase（驼峰式）'}" :filters="nameFilters" tree-node></vxe-table-column>
       <vxe-table-column field="desc" title="app.api.title.desc" type="html" min-width="200"></vxe-table-column>
       <vxe-table-column field="type" title="app.api.title.type" type="html" min-width="140"></vxe-table-column>
       <vxe-table-column field="enum" :title="$t('app.api.title.enum')" type="html" min-width="150"></vxe-table-column>
-      <vxe-table-column field="defVal" :title="$t('app.api.title.defVal')" type="html" min-width="160"></vxe-table-column>
-      <vxe-table-column field="version" :title="$t('app.api.title.version')" width="120">
+      <vxe-table-column field="defVal" :title="$t('app.api.title.defVal')" type="html" min-width="160" :title-help="{message: '部分参数可支持全局设置，具体请查阅相关说明'}"></vxe-table-column>
+      <vxe-table-column field="version" :title="$t('app.api.title.version')" width="120" :title-help="{message: '该文档与最新版本保持同步，如果遇到参数无效时，需要检查当前使用的版本号是否支持该参数'}">
         <template v-slot="{ row }">
           <span v-show="row.version" class="compatibility">v{{  row.version }}</span>
         </template>
@@ -75,48 +75,48 @@ import switchAPI from '../../api/switch'
 import listAPI from '../../api/list'
 import pulldownAPI from '../../api/pulldown'
 
-import i18n from '../../i18n'
-const attributes = window.attributes = {}
-const tags = window.tags = {}
+// import i18n from '../../i18n'
+// const attributes = window.attributes = {}
+// const tags = window.tags = {}
 
-const tagMaps = [
-  ['vxe-table', tableAPI, { subtags: ['vxe-table-column'], description: '基础表格' }],
-  ['vxe-table-column', tableColumnAPI, { description: '基础表格 - 列' }],
-  ['vxe-grid', gridAPI, { description: '高级表格' }],
-  ['vxe-toolbar', toolbarAPI, { description: '工具栏' }],
-  ['vxe-pager', pagerAPI, { description: '分页' }],
-  ['vxe-radio', radioAPI, { description: '单选框' }],
-  ['vxe-radio-group', radioGroupAPI, { description: '单选组' }],
-  ['vxe-radio-button', radioButtonAPI, { description: '单选按钮' }],
-  ['vxe-checkbox', checkboxAPI, { description: '复选框' }],
-  ['vxe-checkbox-group', checkboxGroupAPI, { description: '复选组' }],
-  ['vxe-switch', switchAPI, { description: '开关按钮' }],
-  ['vxe-input', inputAPI, { description: '输入框' }],
-  ['vxe-select', selectAPI, { subtags: ['vxe-optgroup', 'vxe-option'], description: '下拉框' }],
-  ['vxe-optgroup', optgroupAPI, { subtags: ['vxe-option'], description: '下拉框 - 分组' }],
-  ['vxe-option', optionAPI, { description: '下拉框 - 选项' }],
-  ['vxe-button', buttonAPI, { description: '按钮' }],
-  ['vxe-tooltip', tooltipAPI, { description: '工具提示' }],
-  ['vxe-modal', modalAPI, { description: '模态窗口' }],
-  ['vxe-form', formAPI, { subtags: ['vxe-form-item'], description: '表单' }],
-  ['vxe-form-item', formItemAPI, { description: '表单 - 项' }],
-  ['vxe-list', listAPI, { description: '列表' }],
-  ['vxe-pulldown', pulldownAPI, { description: '下拉容器' }]
-]
+// const tagMaps = [
+//   ['vxe-table', tableAPI, { subtags: ['vxe-table-column'], description: '基础表格' }],
+//   ['vxe-table-column', tableColumnAPI, { description: '基础表格 - 列' }],
+//   ['vxe-grid', gridAPI, { description: '高级表格' }],
+//   ['vxe-toolbar', toolbarAPI, { description: '工具栏' }],
+//   ['vxe-pager', pagerAPI, { description: '分页' }],
+//   ['vxe-radio', radioAPI, { description: '单选框' }],
+//   ['vxe-radio-group', radioGroupAPI, { description: '单选组' }],
+//   ['vxe-radio-button', radioButtonAPI, { description: '单选按钮' }],
+//   ['vxe-checkbox', checkboxAPI, { description: '复选框' }],
+//   ['vxe-checkbox-group', checkboxGroupAPI, { description: '复选组' }],
+//   ['vxe-switch', switchAPI, { description: '开关按钮' }],
+//   ['vxe-input', inputAPI, { description: '输入框' }],
+//   ['vxe-select', selectAPI, { subtags: ['vxe-optgroup', 'vxe-option'], description: '下拉框' }],
+//   ['vxe-optgroup', optgroupAPI, { subtags: ['vxe-option'], description: '下拉框 - 分组' }],
+//   ['vxe-option', optionAPI, { description: '下拉框 - 选项' }],
+//   ['vxe-button', buttonAPI, { description: '按钮' }],
+//   ['vxe-tooltip', tooltipAPI, { description: '工具提示' }],
+//   ['vxe-modal', modalAPI, { description: '模态窗口' }],
+//   ['vxe-form', formAPI, { subtags: ['vxe-form-item'], description: '表单' }],
+//   ['vxe-form-item', formItemAPI, { description: '表单 - 项' }],
+//   ['vxe-list', listAPI, { description: '列表' }],
+//   ['vxe-pulldown', pulldownAPI, { description: '下拉容器' }]
+// ]
 
-tagMaps.forEach(confs => {
-  const props = confs[1].find(item => item.name === 'Props').list
-  const keys = []
-  props.forEach(item => {
-    const name = XEUtils.kebabCase(item.name)
-    attributes[`${confs[0]}/${name}`] = {
-      type: XEUtils.toString(item.type).toLowerCase(),
-      description: item.descKey ? i18n.t(item.descKey) : item.desc
-    }
-    keys.push(name)
-  })
-  tags[confs[0]] = Object.assign({ attributes: keys }, confs[2])
-})
+// tagMaps.forEach(confs => {
+//   const props = confs[1].find(item => item.name === 'Props').list
+//   const keys = []
+//   props.forEach(item => {
+//     const name = XEUtils.kebabCase(item.name)
+//     attributes[`${confs[0]}/${name}`] = {
+//       type: XEUtils.toString(item.type).toLowerCase(),
+//       description: item.descKey ? i18n.t(item.descKey) : item.desc
+//     }
+//     keys.push(name)
+//   })
+//   tags[confs[0]] = Object.assign({ attributes: keys }, confs[2])
+// })
 
 export default {
   data () {
diff --git a/examples/views/table/base/Tooltip.vue b/examples/views/table/base/Tooltip.vue
index fa4e68666..afe0c68d1 100644
--- a/examples/views/table/base/Tooltip.vue
+++ b/examples/views/table/base/Tooltip.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <p class="tip">通过 <table-api-link prop="tooltip-config"/>.<table-api-link prop="enabled"/> 开启全表工具提示，还可以配合 <table-api-link prop="contentMethod"/> 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息</p>
+    <p class="tip">
+      通过 <table-api-link prop="tooltip-config"/>.<table-api-link prop="enabled"/> 开启全表工具提示，还可以配合 <table-api-link prop="contentMethod"/> 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息<br>
+      还可以通过 <table-column-api-link prop="title-help"/> 设置标题的帮助提示消息
+    </p>
 
     <vxe-table
       show-footer
@@ -9,7 +12,7 @@
       :data="tableData">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
       <vxe-table-column field="name" title="名称" :title-help="{message: '自定义帮助提示信息'}"></vxe-table-column>
-      <vxe-table-column field="role" title="角色"></vxe-table-column>
+      <vxe-table-column field="role" title="角色" :title-help="{message: '自定义图标', icon: 'fa fa-bell'}"></vxe-table-column>
       <vxe-table-column field="date" title="Date"></vxe-table-column>
       <vxe-table-column field="rate" title="Rate">
         <template v-slot:header>
@@ -51,7 +54,7 @@ export default {
           :data="tableData">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
           <vxe-table-column field="name" title="名称" :title-help="{message: '自定义帮助提示信息'}"></vxe-table-column>
-          <vxe-table-column field="role" title="角色"></vxe-table-column>
+          <vxe-table-column field="role" title="角色" :title-help="{message: '自定义图标', icon: 'fa fa-bell'}"></vxe-table-column>
           <vxe-table-column field="date" title="Date"></vxe-table-column>
           <vxe-table-column field="rate" title="Rate">
             <template v-slot:header>
diff --git a/examples/views/table/grid/FullEdit.vue b/examples/views/table/grid/FullEdit.vue
index dd4543997..a1b6c628a 100644
--- a/examples/views/table/grid/FullEdit.vue
+++ b/examples/views/table/grid/FullEdit.vue
@@ -57,8 +57,9 @@ export default {
           titleAlign: 'right',
           items: [
             { field: 'name', title: 'app.body.label.name', span: 8, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
-            { field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
+            { field: 'email', title: '邮件', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入邮件' } } },
             { field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+            { field: 'role', title: '角色', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
             { field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
             { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
             { span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }
@@ -117,9 +118,10 @@ export default {
             filterMultiple: false,
             editRender: { name: 'input' }
           },
+          { field: 'email', title: 'Email', width: 160, editRender: { name: 'input' } },
           { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
           { field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },
-          { field: 'age', title: 'Age', remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
+          { field: 'age', title: 'Age', visible: false, remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
           { field: 'amount', title: 'Amount', formatter: this.formatAmount, editRender: { name: '$input', props: { type: 'float', digits: 2 } } },
           { field: 'updateDate', title: 'Update Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate },
           { field: 'createDate', title: 'Create Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate }
@@ -147,6 +149,9 @@ export default {
             { required: true, message: 'app.body.valid.rName' },
             { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
           ],
+          email: [
+            { required: true, message: '邮件必须填写' }
+          ],
           role: [
             { required: true, message: '角色必须填写' }
           ]
@@ -194,8 +199,9 @@ export default {
                   titleAlign: 'right',
                   items: [
                     { field: 'name', title: 'app.body.label.name', span: 8, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
-                    { field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
+                    { field: 'email', title: '邮件', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入邮件' } } },
                     { field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+                    { field: 'role', title: '角色', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
                     { field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
                     { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
                     { span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }
@@ -254,9 +260,10 @@ export default {
                     filterMultiple: false,
                     editRender: { name: 'input' }
                   },
+                  { field: 'email', title: 'Email', width: 160, editRender: { name: 'input' } },
                   { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
                   { field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },
-                  { field: 'age', title: 'Age', remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
+                  { field: 'age', title: 'Age', visible: false, remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
                   { field: 'amount', title: 'Amount', formatter: this.formatAmount, editRender: { name: '$input', props: { type: 'float', digits: 2 } } },
                   { field: 'updateDate', title: 'Update Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate },
                   { field: 'createDate', title: 'Create Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate }
@@ -284,6 +291,9 @@ export default {
                     { required: true, message: 'app.body.valid.rName' },
                     { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
                   ],
+                  email: [
+                    { required: true, message: '邮件必须填写' }
+                  ],
                   role: [
                     { required: true, message: '角色必须填写' }
                   ]
diff --git a/examples/views/table/grid/FullQuery.vue b/examples/views/table/grid/FullQuery.vue
index 36a192721..0a0b51eab 100644
--- a/examples/views/table/grid/FullQuery.vue
+++ b/examples/views/table/grid/FullQuery.vue
@@ -107,14 +107,15 @@ export default {
         columns: [
           { type: 'seq', width: 60, fixed: 'left' },
           { type: 'radio', title: 'ID', width: 120, fixed: 'left' },
-          { field: 'name', title: 'Name', minWidth: 200, remoteSort: true },
-          { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 200 },
-          { field: 'age', title: 'Age', remoteSort: true, width: 100 },
+          { field: 'name', title: 'Name', minWidth: 160, remoteSort: true },
+          { field: 'email', title: 'Email', minWidth: 160, editRender: { name: 'input' } },
+          { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 160 },
+          { field: 'age', title: 'Age', visible: false, remoteSort: true, width: 100 },
           {
             field: 'role',
             title: 'Role',
             remoteSort: true,
-            minWidth: 200,
+            minWidth: 160,
             filters: [
               { label: '前端开发', value: '前端' },
               { label: '后端开发', value: '后端' },
@@ -123,9 +124,9 @@ export default {
             ],
             filterMultiple: false
           },
-          { field: 'amount', title: 'Amount', width: 100, formatter: this.formatAmount },
-          { field: 'updateDate', title: 'Update Date', width: 160, remoteSort: true, formatter: this.formatDate },
-          { field: 'createDate', title: 'Create Date', width: 160, remoteSort: true, formatter: this.formatDate }
+          { field: 'amount', title: 'Amount', width: 140, formatter: this.formatAmount },
+          { field: 'updateDate', title: 'Update Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate },
+          { field: 'createDate', title: 'Create Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate }
         ]
       },
       demoCodes: [
@@ -222,14 +223,15 @@ export default {
                 columns: [
                   { type: 'seq', width: 60, fixed: 'left' },
                   { type: 'radio', title: 'ID', width: 120, fixed: 'left' },
-                  { field: 'name', title: 'Name', minWidth: 200, remoteSort: true },
-                  { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 200 },
-                  { field: 'age', title: 'Age', remoteSort: true, width: 100 },
+                  { field: 'name', title: 'Name', minWidth: 160, remoteSort: true },
+                  { field: 'email', title: 'Email', minWidth: 160, editRender: { name: 'input' } },
+                  { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 160 },
+                  { field: 'age', title: 'Age', visible: false, remoteSort: true, width: 100 },
                   {
                     field: 'role',
                     title: 'Role',
                     remoteSort: true,
-                    minWidth: 200,
+                    minWidth: 160,
                     filters: [
                       { label: '前端开发', value: '前端' },
                       { label: '后端开发', value: '后端' },
@@ -238,9 +240,9 @@ export default {
                     ],
                     filterMultiple: false
                   },
-                  { field: 'amount', title: 'Amount', width: 100, formatter: this.formatAmount },
-                  { field: 'updateDate', title: 'Update Date', width: 160, remoteSort: true, formatter: this.formatDate },
-                  { field: 'createDate', title: 'Create Date', width: 160, remoteSort: true, formatter: this.formatDate }
+                  { field: 'amount', title: 'Amount', width: 140, formatter: this.formatAmount },
+                  { field: 'updateDate', title: 'Update Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate },
+                  { field: 'createDate', title: 'Create Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate }
                 ]
               }
             }
diff --git a/examples/views/table/grid/TreeEdit.vue b/examples/views/table/grid/TreeEdit.vue
index d4cad4d89..d5325c12d 100644
--- a/examples/views/table/grid/TreeEdit.vue
+++ b/examples/views/table/grid/TreeEdit.vue
@@ -4,6 +4,7 @@
 
     <vxe-grid
       resizable
+      show-overflow
       highlight-hover-row
       tree-config
       export-config
@@ -62,6 +63,7 @@ export default {
         `
         <vxe-grid
           resizable
+          show-overflow
           highlight-hover-row
           tree-config
           export-config
diff --git a/examples/views/table/grid/TreeLazyEdit.vue b/examples/views/table/grid/TreeLazyEdit.vue
index d8723e5ff..b072ce55c 100644
--- a/examples/views/table/grid/TreeLazyEdit.vue
+++ b/examples/views/table/grid/TreeLazyEdit.vue
@@ -4,6 +4,7 @@
 
     <vxe-grid
       border
+      show-overflow
       resizable
       keep-source
       ref="xGrid"
@@ -77,6 +78,7 @@ export default {
         `
         <vxe-grid
           border
+          show-overflow
           resizable
           keep-source
           ref="xGrid"
diff --git a/examples/views/table/start/Global.vue b/examples/views/table/start/Global.vue
index eee78a990..ce0fe952e 100644
--- a/examples/views/table/start/Global.vue
+++ b/examples/views/table/start/Global.vue
@@ -143,7 +143,8 @@
           // },
           // select: {
           //   size: null,
-          //   transfer: false
+          //   transfer: false,
+          //   multiCharOverflow: 8
           // },
           // toolbar: {
           //   size: null,
diff --git a/examples/views/table/tree/Basic.vue b/examples/views/table/tree/Basic.vue
index a3fd2a388..a430a0d13 100644
--- a/examples/views/table/tree/Basic.vue
+++ b/examples/views/table/tree/Basic.vue
@@ -57,6 +57,7 @@
 
     <vxe-table
       border
+      show-overflow
       row-id="id"
       :data="tableData"
       :tree-config="{children: 'children', expandAll: true}">
@@ -160,6 +161,7 @@ export default {
         `
         <vxe-table
           border
+          show-overflow
           row-id="id"
           :data="tableData"
           :tree-config="{children: 'children', expandAll: true}">
diff --git a/examples/views/table/tree/CellValid.vue b/examples/views/table/tree/CellValid.vue
index 0e36f67f0..2a62e1764 100644
--- a/examples/views/table/tree/CellValid.vue
+++ b/examples/views/table/tree/CellValid.vue
@@ -17,6 +17,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       keep-source
       ref="xTree"
       :edit-rules="validRules"
@@ -71,6 +72,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           keep-source
           ref="xTree"
           :edit-rules="validRules"
diff --git a/examples/views/table/tree/Edit.vue b/examples/views/table/tree/Edit.vue
index 47466a7b0..b2828c36f 100644
--- a/examples/views/table/tree/Edit.vue
+++ b/examples/views/table/tree/Edit.vue
@@ -15,6 +15,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       ref="xTree"
       :tree-config="{children: 'children'}"
       :edit-config="{trigger: 'click', mode: 'row'}"
@@ -57,6 +58,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           ref="xTree"
           :tree-config="{children: 'children'}"
           :edit-config="{trigger: 'click', mode: 'row'}"
diff --git a/examples/views/table/tree/Insert.vue b/examples/views/table/tree/Insert.vue
index d15edaf5f..8f94726e8 100644
--- a/examples/views/table/tree/Insert.vue
+++ b/examples/views/table/tree/Insert.vue
@@ -15,6 +15,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       keep-source
       ref="xTree"
       class="my_treetable_insert"
@@ -61,6 +62,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           keep-source
           ref="xTree"
           class="my_treetable_insert"
diff --git a/examples/views/table/tree/LazyEdit.vue b/examples/views/table/tree/LazyEdit.vue
index cb3510138..2edaad9d2 100644
--- a/examples/views/table/tree/LazyEdit.vue
+++ b/examples/views/table/tree/LazyEdit.vue
@@ -13,6 +13,7 @@
 
     <vxe-table
       border
+      show-overflow
       resizable
       keep-source
       ref="xTree"
@@ -56,6 +57,7 @@ export default {
 
         <vxe-table
           border
+          show-overflow
           resizable
           keep-source
           ref="xTree"
diff --git a/examples/views/table/tree/Menu.vue b/examples/views/table/tree/Menu.vue
index c4e31aee6..949826e09 100644
--- a/examples/views/table/tree/Menu.vue
+++ b/examples/views/table/tree/Menu.vue
@@ -6,6 +6,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       keep-source
       ref="xTree"
       :tree-config="treeConfig"
@@ -70,6 +71,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           keep-source
           ref="xTree"
           :tree-config="treeConfig"
diff --git a/examples/views/table/tree/RowValid.vue b/examples/views/table/tree/RowValid.vue
index aed94288d..218728c04 100644
--- a/examples/views/table/tree/RowValid.vue
+++ b/examples/views/table/tree/RowValid.vue
@@ -14,6 +14,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       keep-source
       ref="xTree"
       :edit-rules="validRules"
@@ -68,6 +69,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           keep-source
           ref="xTree"
           :edit-rules="validRules"
diff --git a/examples/views/table/tree/Toolbar.vue b/examples/views/table/tree/Toolbar.vue
index dc6ce476e..3b6f76891 100644
--- a/examples/views/table/tree/Toolbar.vue
+++ b/examples/views/table/tree/Toolbar.vue
@@ -14,6 +14,7 @@
 
     <vxe-table
       resizable
+      show-overflow
       export-config
       keep-source
       ref="xTree"
@@ -62,6 +63,7 @@ export default {
 
         <vxe-table
           resizable
+          show-overflow
           export-config
           keep-source
           ref="xTree"
diff --git a/helper/vetur/attributes.json b/helper/vetur/attributes.json
index 02292f15b..a4ec32772 100644
--- a/helper/vetur/attributes.json
+++ b/helper/vetur/attributes.json
@@ -269,7 +269,7 @@
   },
   "vxe-table/cloak": {
     "type": "boolean",
-    "description": "可以设置为 true 来避免初始化渲染时的闪动"
+    "description": "用于低性能的浏览器，可以设置为 true 来避免初始化渲染时的闪动"
   },
   "vxe-table/delay-hover": {
     "type": "number",
@@ -705,7 +705,7 @@
   },
   "vxe-grid/cloak": {
     "type": "boolean",
-    "description": "可以设置为 true 来避免初始化渲染时的闪动"
+    "description": "用于低性能的浏览器，可以设置为 true 来避免初始化渲染时的闪动"
   },
   "vxe-grid/delay-hover": {
     "type": "number",
@@ -1035,6 +1035,10 @@
     "type": "number | string",
     "description": "只对 type=float 有效，小数位数"
   },
+  "vxe-input/align": {
+    "type": "string",
+    "description": "内容对齐方式"
+  },
   "vxe-input/controls": {
     "type": "boolean",
     "description": "只对 type=number|integer|float 有效，是否显示控制按钮"
@@ -1091,6 +1095,10 @@
     "type": "boolean",
     "description": "是否多选"
   },
+  "vxe-select/multi-char-overflow": {
+    "type": "number, string",
+    "description": "只对 multiple 有效，设置多选中每个选项显示值的最大字符数，如果超出显示省略号；如果为 -1 则关闭"
+  },
   "vxe-select/clearable": {
     "type": "boolean",
     "description": "当有值时，是否在右侧显示清除按钮"
diff --git a/helper/vetur/tags.json b/helper/vetur/tags.json
index e75c7af56..3c37aa8bf 100644
--- a/helper/vetur/tags.json
+++ b/helper/vetur/tags.json
@@ -318,6 +318,7 @@
       "max",
       "step",
       "digits",
+      "align",
       "controls",
       "min-date",
       "max-date",
@@ -337,6 +338,7 @@
       "value,v-model",
       "size",
       "multiple",
+      "multi-char-overflow",
       "clearable",
       "placeholder",
       "visible",
diff --git a/packages/body/src/body.js b/packages/body/src/body.js
index b0206c654..d8238a32a 100644
--- a/packages/body/src/body.js
+++ b/packages/body/src/body.js
@@ -133,7 +133,7 @@ function renderColumn (h, _vm, $xetable, $seq, seq, rowid, fixedType, rowLevel,
         DomTools.updateCellTitle(evnt.currentTarget, column)
       } else if (showTooltip || enabled) {
         // 如果配置了显示 tooltip
-        $xetable.triggerTooltipEvent(evnt, params)
+        $xetable.triggerBodyTooltipEvent(evnt, params)
       }
       if (bindMouseenter) {
         $xetable.emitEvent('cell-mouseenter', Object.assign({ cell: evnt.currentTarget }, params), evnt)
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
index 80c629011..2947f3e37 100644
--- a/packages/button/src/button.js
+++ b/packages/button/src/button.js
@@ -1,9 +1,11 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
 export default {
   name: 'VxeButton',
+  mixins: [vSize],
   props: {
     type: String,
     size: { type: String, default: () => GlobalConfig.button.size || GlobalConfig.size },
@@ -28,9 +30,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isText () {
       return this.type === 'text'
     },
diff --git a/packages/cell/src/cell.js b/packages/cell/src/cell.js
index 6d5ffbcf1..dd69bc893 100644
--- a/packages/cell/src/cell.js
+++ b/packages/cell/src/cell.js
@@ -60,6 +60,27 @@ function renderTitleContent (h, params, content) {
   ]
 }
 
+function getFooterContent (h, params) {
+  const { $table, column, _columnIndex, items } = params
+  const { slots, own } = column
+  const renderOpts = own.editRender || own.cellRender
+  if (slots && slots.footer) {
+    return slots.footer.call($table, params, h)
+  }
+  if (renderOpts) {
+    const compConf = VXETable.renderer.get(renderOpts.name)
+    if (compConf && compConf.renderFooter) {
+      return compConf.renderFooter.call($table, h, renderOpts, params, { $grid: $table.$xegrid, $table })
+    }
+  }
+  return [UtilTools.formatText(items[_columnIndex], 1)]
+}
+
+function getDefaultCellLabel (params) {
+  const { row, column } = params
+  return UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)
+}
+
 export const Cell = {
   createColumn ($xetable, _vm) {
     const { type, sortable, remoteSort, filters, editRender, treeNode } = _vm
@@ -132,7 +153,7 @@ export const Cell = {
     return renderHelpIcon(h, params).concat(Cell.renderHeaderTitle(h, params))
   },
   renderDefaultCell (h, params) {
-    const { $table, row, column } = params
+    const { $table, column } = params
     const { slots, own } = column
     const renderOpts = own.editRender || own.cellRender
     if (slots && slots.default) {
@@ -145,25 +166,21 @@ export const Cell = {
         return compConf[funName].call($table, h, renderOpts, Object.assign({ $type: own.editRender ? 'edit' : 'cell' }, params), { $grid: $table.$xegrid, $table })
       }
     }
-    return [UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)]
+    return [
+      h('span', {
+        class: 'vxe-cell--label'
+      }, [getDefaultCellLabel(params)])
+    ]
   },
   renderTreeCell (h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params))
   },
   renderDefaultFooter (h, params) {
-    const { $table, column, _columnIndex, items } = params
-    const { slots, own } = column
-    const renderOpts = own.editRender || own.cellRender
-    if (slots && slots.footer) {
-      return slots.footer.call($table, params, h)
-    }
-    if (renderOpts) {
-      const compConf = VXETable.renderer.get(renderOpts.name)
-      if (compConf && compConf.renderFooter) {
-        return compConf.renderFooter.call($table, h, renderOpts, params, { $grid: $table.$xegrid, $table })
-      }
-    }
-    return [UtilTools.formatText(items[_columnIndex], 1)]
+    return [
+      h('span', {
+        class: 'vxe-cell--item'
+      }, getFooterContent(h, params))
+    ]
   },
 
   /**
@@ -521,7 +538,7 @@ export const Cell = {
    * HTML 标签
    */
   renderHTMLCell (h, params) {
-    const { $table, row, column } = params
+    const { $table, column } = params
     const { slots } = column
     if (slots && slots.default) {
       return slots.default.call($table, params, h)
@@ -530,7 +547,7 @@ export const Cell = {
       h('span', {
         class: 'vxe-cell--html',
         domProps: {
-          innerHTML: UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)
+          innerHTML: getDefaultCellLabel(params)
         }
       })
     ]
@@ -666,7 +683,7 @@ export const Cell = {
     return Cell.renderTreeIcon(h, params, Cell.renderCellEdit(h, params))
   },
   runRenderer (h, params, _vm, isEdit) {
-    const { $table, row, column } = params
+    const { $table, column } = params
     const { slots, own, formatter } = column
     const editRender = own.editRender
     const compConf = VXETable.renderer.get(editRender.name)
@@ -680,7 +697,11 @@ export const Cell = {
       return slots.default.call($table, params, h)
     }
     if (formatter) {
-      return [UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)]
+      return [
+        h('span', {
+          class: 'vxe-cell--label'
+        }, [getDefaultCellLabel(params)])
+      ]
     }
     return Cell.renderDefaultCell.call(_vm, h, params)
   }
diff --git a/packages/checkbox/src/checkbox.js b/packages/checkbox/src/checkbox.js
index 23abeb2a8..504a238d1 100644
--- a/packages/checkbox/src/checkbox.js
+++ b/packages/checkbox/src/checkbox.js
@@ -1,8 +1,10 @@
 import { UtilTools } from '../../tools'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 
 export default {
   name: 'VxeCheckbox',
+  mixins: [vSize],
   props: {
     value: Boolean,
     label: [String, Number],
@@ -18,9 +20,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isGroup () {
       return this.$xegroup
     },
diff --git a/packages/conf/index.js b/packages/conf/index.js
index ee2e4d60a..e2e5ab929 100644
--- a/packages/conf/index.js
+++ b/packages/conf/index.js
@@ -1,6 +1,6 @@
 const iconPrefix = 'vxe-icon--'
 const GlobalConfig = {
-  // size: null, // 全局尺寸
+  size: null, // 全局尺寸
   zIndex: 100, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
@@ -173,7 +173,8 @@ const GlobalConfig = {
       props: {
         list: null,
         result: 'result',
-        total: 'page.total'
+        total: 'page.total',
+        message: 'message'
       }
       // beforeItem: null,
       // beforeColumn: null,
@@ -230,7 +231,8 @@ const GlobalConfig = {
   },
   select: {
     // size: null,
-    // transfer: false
+    // transfer: false,
+    multiCharOverflow: 8
   },
   toolbar: {
     // size: null,
diff --git a/packages/form/src/form.js b/packages/form/src/form.js
index 8b69d0e0c..83b34c40e 100644
--- a/packages/form/src/form.js
+++ b/packages/form/src/form.js
@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import VXETable from '../../v-x-e-table'
 import { UtilTools, DomTools } from '../../tools'
 import { createItem } from './util'
@@ -166,6 +167,7 @@ function renderItems (h, _vm) {
 
 export default {
   name: 'VxeForm',
+  mixins: [vSize],
   props: {
     loading: Boolean,
     data: Object,
@@ -194,9 +196,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     validOpts () {
       return Object.assign({}, GlobalConfig.form.validConfig, this.validConfig)
     }
diff --git a/packages/grid/src/grid.js b/packages/grid/src/grid.js
index afb671bf9..dab9a289b 100644
--- a/packages/grid/src/grid.js
+++ b/packages/grid/src/grid.js
@@ -1,6 +1,7 @@
 import Table from '../../table'
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import VXETable from '../../v-x-e-table'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
@@ -105,6 +106,7 @@ Object.keys(Table.methods).forEach(name => {
 
 export default {
   name: 'VxeGrid',
+  mixins: [vSize],
   props: {
     ...Table.props,
     columns: Array,
@@ -139,9 +141,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isMsg () {
       return this.proxyOpts.message !== false
     },
@@ -392,7 +391,12 @@ export default {
       return ons
     },
     initToolbar () {
-      this.$nextTick(() => this.$refs.xTable.connect(this.$refs.xToolbar))
+      this.$nextTick(() => {
+        const { xTable, xToolbar } = this.$refs
+        if (xTable && xToolbar) {
+          xTable.connect(xToolbar)
+        }
+      })
     },
     initPages () {
       if (this.pagerConfig && this.pagerOpts.pageSize) {
@@ -699,7 +703,7 @@ export default {
       }
     },
     sortChangeEvent (params) {
-      const { proxyConfig, remoteSort } = this
+      const { remoteSort } = this
       const { $table, column } = params
       const isRemote = XEUtils.isBoolean(column.remoteSort) ? column.remoteSort : ($table.sortOpts.remote || remoteSort)
       const property = params.order ? params.property : null
@@ -710,19 +714,22 @@ export default {
           order: params.order,
           sortBy: params.sortBy
         } : {}
-        if (proxyConfig) {
+        if (this.proxyConfig) {
+          this.tablePage.currentPage = 1
           this.commitProxy('query')
         }
       }
       this.$emit('sort-change', Object.assign({ $grid: this }, params))
     },
     filterChangeEvent (params) {
-      const { remoteFilter } = this
       const { $table, filters } = params
       // 如果是服务端过滤
-      if ($table.filterOpts.remote || remoteFilter) {
+      if ($table.filterOpts.remote || this.remoteFilter) {
         this.filterData = filters
-        this.commitProxy('query')
+        if (this.proxyConfig) {
+          this.tablePage.currentPage = 1
+          this.commitProxy('query')
+        }
       }
       this.$emit('filter-change', Object.assign({ $grid: this }, params))
     },
diff --git a/packages/input/src/input.js b/packages/input/src/input.js
index 07e9db462..a6658002c 100644
--- a/packages/input/src/input.js
+++ b/packages/input/src/input.js
@@ -1,5 +1,6 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
 const browse = DomTools.browse
@@ -551,6 +552,7 @@ function renderExtraSuffixIcon (h, _vm) {
 
 export default {
   name: 'VxeInput',
+  mixins: [vSize],
   props: {
     value: [String, Number, Date],
     name: String,
@@ -561,6 +563,7 @@ export default {
     placeholder: String,
     maxlength: [String, Number],
     autocomplete: { type: String, default: 'off' },
+    align: String,
     form: String,
     size: { type: String, default: () => GlobalConfig.input.size || GlobalConfig.size },
 
@@ -611,9 +614,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isNumber () {
       return ['number', 'integer', 'float'].indexOf(this.type) > -1
     },
@@ -943,7 +943,7 @@ export default {
     GlobalEvent.off(this, 'blur')
   },
   render (h) {
-    const { controls, isDatePicker, visiblePanel, isActivated, vSize, type, readonly, disabled } = this
+    const { controls, isDatePicker, visiblePanel, isActivated, vSize, type, align, readonly, disabled } = this
     const childs = []
     const prefix = rendePrefixIcon(h, this)
     const suffix = renderSuffixIcon(h, this)
@@ -966,6 +966,7 @@ export default {
     return h('div', {
       class: ['vxe-input', `type--${type}`, {
         [`size--${vSize}`]: vSize,
+        [`is--${align}`]: align,
         'is--controls': controls,
         'is--prefix': !!prefix,
         'is--suffix': !!suffix,
diff --git a/packages/mixins/size.js b/packages/mixins/size.js
new file mode 100644
index 000000000..034f70e52
--- /dev/null
+++ b/packages/mixins/size.js
@@ -0,0 +1,8 @@
+export default {
+  computed: {
+    vSize () {
+      const { $parent, size } = this
+      return size || ($parent && ($parent.size || $parent.vSize))
+    }
+  }
+}
diff --git a/packages/modal/src/modal.js b/packages/modal/src/modal.js
index b489f3d24..35c4f52f2 100644
--- a/packages/modal/src/modal.js
+++ b/packages/modal/src/modal.js
@@ -1,4 +1,5 @@
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import XEUtils from 'xe-utils/methods/xe-utils'
 import MsgQueue from './queue'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
@@ -7,6 +8,7 @@ const activeModals = []
 
 export default {
   name: 'VxeModal',
+  mixins: [vSize],
   props: {
     value: Boolean,
     id: String,
@@ -60,9 +62,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || (this.$parent && (this.$parent.size || this.$parent.vSize))
-    },
     isMsg () {
       return this.type === 'message'
     }
diff --git a/packages/pager/src/pager.js b/packages/pager/src/pager.js
index 98f9df23c..b55bfd8d5 100644
--- a/packages/pager/src/pager.js
+++ b/packages/pager/src/pager.js
@@ -1,8 +1,10 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 
 export default {
   name: 'VxePager',
+  mixins: [vSize],
   props: {
     size: { type: String, default: () => GlobalConfig.pager.size || GlobalConfig.size },
     // 自定义布局
@@ -42,9 +44,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isSizes () {
       return this.layouts.some(name => name === 'Sizes')
     },
diff --git a/packages/pulldown/src/pulldown.js b/packages/pulldown/src/pulldown.js
index 2601c4725..cbac366f0 100644
--- a/packages/pulldown/src/pulldown.js
+++ b/packages/pulldown/src/pulldown.js
@@ -1,8 +1,10 @@
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
 export default {
   name: 'VxePulldown',
+  mixins: [vSize],
   props: {
     disabled: Boolean,
     placement: String,
@@ -20,11 +22,6 @@ export default {
       isActivated: false
     }
   },
-  computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    }
-  },
   created () {
     GlobalEvent.on(this, 'mousewheel', this.handleGlobalMousewheelEvent)
     GlobalEvent.on(this, 'mousedown', this.handleGlobalMousedownEvent)
diff --git a/packages/radio/src/radio.js b/packages/radio/src/radio.js
index 337c6d70d..aa23b22b9 100644
--- a/packages/radio/src/radio.js
+++ b/packages/radio/src/radio.js
@@ -1,8 +1,10 @@
 import { UtilTools } from '../../tools'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 
 export default {
   name: 'VxeRadio',
+  mixins: [vSize],
   props: {
     value: [String, Number],
     label: [String, Number],
@@ -18,9 +20,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isGroup () {
       return this.$xegroup
     },
diff --git a/packages/select/src/select.js b/packages/select/src/select.js
index 6b9cc2b5e..84d9330ec 100644
--- a/packages/select/src/select.js
+++ b/packages/select/src/select.js
@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import VxeInput from '../../input/src/input'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
 function isOptionVisible (option) {
@@ -172,12 +173,14 @@ export function renderOptgroup (h, _vm) {
 
 export default {
   name: 'VxeSelect',
+  mixins: [vSize],
   props: {
     value: null,
     clearable: Boolean,
     placeholder: String,
     disabled: Boolean,
     multiple: Boolean,
+    multiCharOverflow: { type: [Number, String], default: () => GlobalConfig.select.multiCharOverflow },
     prefixIcon: String,
     placement: String,
     options: Array,
@@ -214,9 +217,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     propsOpts () {
       return this.optionProps || {}
     },
@@ -238,13 +238,16 @@ export default {
     isGroup () {
       return this.fullGroupList.some(item => item.options && item.options.length)
     },
+    multiMaxCharNum () {
+      return XEUtils.toNumber(this.multiCharOverflow)
+    },
     selectLabel () {
-      const { value, multiple } = this
+      const { value, multiple, multiMaxCharNum } = this
       if (value && multiple) {
         return value.map(val => {
           const label = getSelectLabel(this, val)
-          if (label.length > 8) {
-            return `${label.substring(0, 8)}...`
+          if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+            return `${label.substring(0, multiMaxCharNum)}...`
           }
           return label
         }).join(', ')
diff --git a/packages/switch/src/switch.js b/packages/switch/src/switch.js
index ecec531fb..3ad302efb 100644
--- a/packages/switch/src/switch.js
+++ b/packages/switch/src/switch.js
@@ -1,10 +1,12 @@
 import { UtilTools, DomTools } from '../../tools'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 
 const browse = DomTools.browse
 
 export default {
   name: 'VxeSwitch',
+  mixins: [vSize],
   props: {
     value: [String, Number, Boolean],
     disabled: Boolean,
@@ -23,9 +25,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     isChecked () {
       return this.value === this.onValue
     },
diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js
index e9958c2be..f6bac0116 100644
--- a/packages/table/src/methods.js
+++ b/packages/table/src/methods.js
@@ -1775,25 +1775,13 @@ const Methods = {
     const titleElem = evnt.currentTarget
     this.handleTargetEnterEvent()
     if (tooltipStore.column !== column || !tooltipStore.visible) {
-      this.handleTooltip(evnt, titleElem, titleElem, params)
+      this.handleTooltip(evnt, titleElem, titleElem, null, params)
     }
   },
   /**
-   * 触发表尾 tooltip 事件
+   * 触发单元格 tooltip 事件
    */
-  triggerFooterTooltipEvent (evnt, params) {
-    const { column } = params
-    const { tooltipStore } = this
-    const cell = evnt.currentTarget
-    this.handleTargetEnterEvent()
-    if (tooltipStore.column !== column || !tooltipStore.visible) {
-      this.handleTooltip(evnt, cell, cell.children[0], params)
-    }
-  },
-  /**
-   * 触发 tooltip 事件
-   */
-  triggerTooltipEvent (evnt, params) {
+  triggerBodyTooltipEvent (evnt, params) {
     const { editConfig, editOpts, editStore, tooltipStore } = this
     const { actived } = editStore
     const { row, column } = params
@@ -1805,7 +1793,26 @@ const Methods = {
       }
     }
     if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
-      this.handleTooltip(evnt, cell, column.treeNode ? cell.querySelector('.vxe-tree-cell') : cell.children[0], params)
+      let overflowElem
+      let tipElem
+      if (column.treeNode) {
+        overflowElem = cell.querySelector('.vxe-tree-cell')
+      } else {
+        tipElem = cell.querySelector(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
+      }
+      this.handleTooltip(evnt, cell, overflowElem || cell.children[0], tipElem, params)
+    }
+  },
+  /**
+   * 触发表尾 tooltip 事件
+   */
+  triggerFooterTooltipEvent (evnt, params) {
+    const { column } = params
+    const { tooltipStore } = this
+    const cell = evnt.currentTarget
+    this.handleTargetEnterEvent()
+    if (tooltipStore.column !== column || !tooltipStore.visible) {
+      this.handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params)
     }
   },
   /**
@@ -1814,7 +1821,7 @@ const Methods = {
    * @param {ColumnConfig} column 列配置
    * @param {Row} row 行对象
    */
-  handleTooltip (evnt, cell, overflowElem, params) {
+  handleTooltip (evnt, cell, overflowElem, tipElem, params) {
     params.cell = cell
     const { $refs, tooltipOpts, tooltipStore } = this
     const { column, row } = params
@@ -1823,14 +1830,15 @@ const Methods = {
     const customContent = contentMethod ? contentMethod(params) : null
     const useCustom = contentMethod && !XEUtils.eqNull(customContent)
     const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim()
-    if (content && (enabled || useCustom || overflowElem.scrollWidth > overflowElem.clientWidth)) {
+    const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
+    if (content && (enabled || useCustom || isCellOverflow)) {
       Object.assign(tooltipStore, {
         row,
         column,
         visible: true
       })
       if (tooltip) {
-        tooltip.toVisible(overflowElem, UtilTools.formatText(content))
+        tooltip.toVisible(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
       }
     }
     return this.$nextTick()
diff --git a/packages/table/src/table.js b/packages/table/src/table.js
index 3c11cf9c1..5be9d34dd 100644
--- a/packages/table/src/table.js
+++ b/packages/table/src/table.js
@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
 import VXETable from '../../v-x-e-table'
 import VxeTableBody from '../../body'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent, ResizeEvent } from '../../tools'
 import methods from './methods'
 
@@ -64,6 +65,7 @@ function renderFixed (h, $xetable, fixedType) {
 
 export default {
   name: 'VxeTable',
+  mixins: [vSize],
   props: {
     /** 基本属性 */
     id: String,
@@ -221,7 +223,6 @@ export default {
       default: null
     }
   },
-  mixins: [],
   data () {
     return {
       tId: `${XEUtils.uniqueId()}`,
@@ -399,9 +400,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     validOpts () {
       return Object.assign({ message: 'default' }, GlobalConfig.table.validConfig, this.validConfig)
     },
@@ -742,7 +740,6 @@ export default {
     this.preventEvent(null, 'activated')
   },
   deactivated () {
-    this.elemStore = {}
     this.preventEvent(null, 'deactivated')
   },
   beforeDestroy () {
diff --git a/packages/textarea/src/textarea.js b/packages/textarea/src/textarea.js
index 0f5230f67..b2c594815 100644
--- a/packages/textarea/src/textarea.js
+++ b/packages/textarea/src/textarea.js
@@ -1,11 +1,13 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
 import { UtilTools } from '../../tools'
 
 let autoTxtElem
 
 export default {
   name: 'VxeTextarea',
+  mixins: [vSize],
   props: {
     value: [String, Number],
     name: String,
@@ -21,9 +23,6 @@ export default {
     size: { type: String, default: () => GlobalConfig.textarea.size || GlobalConfig.size }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     inputCount () {
       return XEUtils.getSize(this.value)
     },
diff --git a/packages/toolbar/src/toolbar.js b/packages/toolbar/src/toolbar.js
index 98992e054..77e57b053 100644
--- a/packages/toolbar/src/toolbar.js
+++ b/packages/toolbar/src/toolbar.js
@@ -1,6 +1,7 @@
 import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
 import VXETable from '../../v-x-e-table'
+import vSize from '../../mixins/size'
 import { UtilTools, DomTools, GlobalEvent } from '../../tools'
 
 /**
@@ -200,6 +201,7 @@ function renderCustoms (h, _vm) {
 
 export default {
   name: 'VxeToolbar',
+  mixins: [vSize],
   props: {
     loading: Boolean,
     refresh: [Boolean, Object],
@@ -230,9 +232,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     refreshOpts () {
       return Object.assign({}, GlobalConfig.toolbar.refresh, this.refresh)
     },
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index f3da1c964..0f9d36edd 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -2,6 +2,28 @@ import XEUtils from 'xe-utils/methods/xe-utils'
 import GlobalConfig from '../../conf'
 import { UtilTools, DomTools } from '../../tools'
 
+function updateTipStyle (_vm) {
+  const { $el: wrapperElem, tipTarget, tipStore } = _vm
+  const { scrollTop, scrollLeft, visibleWidth } = DomTools.getDomNode()
+  const { top, left } = DomTools.getAbsolutePos(tipTarget)
+  const marginSize = 6
+  const offsetHeight = wrapperElem.offsetHeight
+  const offsetWidth = wrapperElem.offsetWidth
+  let tipLeft = left
+  let tipTop = top - offsetHeight - marginSize
+  tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2))
+  if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+    tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+  }
+  if (top - offsetHeight < scrollTop + marginSize) {
+    tipStore.placement = 'bottom'
+    tipTop = top + tipTarget.offsetHeight + marginSize
+  }
+  tipStore.style.top = `${tipTop}px`
+  tipStore.style.left = `${tipLeft}px`
+  tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+}
+
 export default {
   name: 'VxeTooltip',
   props: {
@@ -150,11 +172,8 @@ export default {
     toVisible (target, message) {
       this.targetActive = true
       if (target) {
-        const { $el, tipStore } = this
+        const { $el, tipStore, zIndex } = this
         const parentNode = $el.parentNode
-        tipStore.placement = 'top'
-        tipStore.style = { width: 'auto' }
-        tipStore.arrowStyle = { left: '50%' }
         if (!parentNode) {
           document.body.appendChild($el)
         }
@@ -164,48 +183,19 @@ export default {
         this.tipTarget = target
         this.update(true)
         this.updateZindex()
+        tipStore.placement = 'top'
+        tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || this.tipZindex }
+        tipStore.arrowStyle = { left: '50%' }
         return this.updatePlacement()
       }
       return this.$nextTick()
     },
     updatePlacement () {
       return this.$nextTick().then(() => {
-        const { $el: wrapperElem, tipTarget, tipStore, zIndex } = this
+        const { $el: wrapperElem, tipTarget } = this
         if (tipTarget && wrapperElem) {
-          const { scrollTop, scrollLeft, visibleWidth } = DomTools.getDomNode()
-          const { top, left } = DomTools.getAbsolutePos(tipTarget)
-          let tipLeft = left
-          const offsetHeight = wrapperElem.offsetHeight
-          const offsetWidth = wrapperElem.offsetWidth
-          tipLeft = left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2)
-          tipStore.style = {
-            zIndex: zIndex || this.tipZindex,
-            top: `${top - offsetHeight - 6}px`,
-            left: `${tipLeft}px`
-          }
-          return this.$nextTick().then(() => {
-            const offsetHeight = wrapperElem.offsetHeight
-            const offsetWidth = wrapperElem.offsetWidth
-            Object.assign(tipStore.style, {
-              top: `${top - offsetHeight - 6}px`,
-              left: `${tipLeft}px`
-            })
-            if (top - offsetHeight < scrollTop + 6) {
-              tipStore.placement = 'bottom'
-              tipStore.style.top = `${top + tipTarget.offsetHeight + 6}px`
-            }
-            if (tipLeft < scrollLeft + 6) {
-              // 超出左边界
-              tipLeft = scrollLeft + 6
-              tipStore.arrowStyle.left = `${left > tipLeft + 16 ? left - tipLeft + 16 : 16}px`
-              tipStore.style.left = `${tipLeft}px`
-            } else if (tipLeft + offsetWidth > scrollLeft + visibleWidth) {
-              // 超出右边界
-              tipLeft = scrollLeft + visibleWidth - offsetWidth - 6
-              tipStore.arrowStyle.left = `${offsetWidth - Math.max(Math.floor((tipLeft + offsetWidth - left) / 2), 22)}px`
-              tipStore.style.left = `${tipLeft}px`
-            }
-          })
+          updateTipStyle(this)
+          return this.$nextTick().then(() => updateTipStyle(this))
         }
       })
     },
diff --git a/styles/button.scss b/styles/button.scss
index 24daa3c0f..28dd6c0f8 100644
--- a/styles/button.scss
+++ b/styles/button.scss
@@ -347,6 +347,8 @@ $btnThemeList: (
     transform: scaleY(0.5);
     transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
     transform-origin: center top;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
     &[data-placement="top"] {
       transform-origin: center bottom;
     }
diff --git a/styles/footer.scss b/styles/footer.scss
index 19003138b..285823aef 100644
--- a/styles/footer.scss
+++ b/styles/footer.scss
@@ -6,4 +6,18 @@
   &.body--wrapper{
     overflow-x: auto;
   }
-}
\ No newline at end of file
+}
+
+.vxe-footer--column {
+  &.col--ellipsis {
+    & > .vxe-cell {
+      display: flex;
+      align-items: center;
+      .vxe-cell--item {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
diff --git a/styles/input.scss b/styles/input.scss
index bbf2a4092..d0a25808f 100644
--- a/styles/input.scss
+++ b/styles/input.scss
@@ -102,6 +102,21 @@ $iconWidth: 1.6em;
       padding-right: #{$iconWidth + 0.2em};
     }
   }
+  &.is--left {
+    .vxe-input--inner {
+      text-align: left;
+    }
+  }
+  &.is--center {
+    .vxe-input--inner {
+      text-align: center;
+    }
+  }
+  &.is--right {
+    .vxe-input--inner {
+      text-align: right;
+    }
+  }
   &.is--controls {
     &.type--search,
     &.type--password,
@@ -250,6 +265,8 @@ $iconWidth: 1.6em;
     transform: scaleY(0.5);
     transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
     transform-origin: center top;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
     &[data-placement="top"] {
       transform-origin: center bottom;
     }
@@ -271,8 +288,6 @@ $iconWidth: 1.6em;
 .vxe-input--panel-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0.2em 0;
-  max-height: 26em;
 }
 
 .vxe-input--panel-layout-wrapper {
@@ -286,31 +301,11 @@ $iconWidth: 1.6em;
   &.type--month,
   &.type--year {
     user-select: none;
-    .vxe-input--panel-wrapper {
-      padding: 0.8em;
-    }
-  }
-  &.type--date,
-  &.type--month,
-  &.type--year {
-    .vxe-input--panel-wrapper {
-      width: 24em;
-    }
-  }
-  &.type--week {
-    .vxe-input--panel-wrapper {
-      width: 27.2em;
-    }
   }
   &.type--datetime {
-    .vxe-input--panel-left-wrapper {
-      width: 24em;
-      padding: 0.8em;
-    }
     .vxe-input--panel-right-wrapper {
       display: flex;
       flex-direction: column;
-      padding: 0.8em;
       border-left: 1px solid $vxe-input-border-color;
     }
   }
@@ -346,10 +341,7 @@ $iconWidth: 1.6em;
 
 .vxe-input--time-picker-title {
   display: inline-block;
-  height: 2.2em;
-  line-height: 2.2em;
   text-align: center;
-  padding: 0 0.8em;
   border: 1px solid $vxe-input-border-color;
   border-radius: $vxe-border-radius;
 }
@@ -357,9 +349,7 @@ $iconWidth: 1.6em;
   position: absolute;
   right: 0;
   top: 0;
-  height: 2.2em;
   outline: 0;
-  padding: 0 0.6em;
   border: 1px solid $vxe-input-border-color;
   border-radius: $vxe-border-radius;
   cursor: pointer;
@@ -381,11 +371,6 @@ $iconWidth: 1.6em;
   flex-shrink: 0;
 }
 
-.vxe-input--time-picker-header,
-.vxe-input--date-picker-header {
-  padding-bottom: 0.5em;
-}
-
 .vxe-input--date-picker-header {
   display: flex;
   flex-direction: row;
@@ -401,23 +386,16 @@ $iconWidth: 1.6em;
 .vxe-input--date-picker-type-wrapper {
   .vxe-input--date-picker-label,
   .vxe-input--date-picker-btn {
-    padding: 0 0.6em;
     display: inline-block;
   }
 }
 .vxe-input--date-picker-btn-wrapper {
   display: flex;
   flex-direction: row;
-  .vxe-input--date-picker-btn {
-    width: 2.2em;
-    margin-left: 0.5em;
-  }
 }
 .vxe-input--date-picker-label,
 .vxe-input--date-picker-btn {
   display: inline-block;
-  height: 2.2em;
-  line-height: 2.2em;
   display: flex;
   border-radius: $vxe-border-radius;
   border: 1px solid $vxe-input-border-color;
@@ -450,6 +428,7 @@ $iconWidth: 1.6em;
     border-spacing: 0;
     border-collapse: separate;
     text-align: center;
+    table-layout: fixed
   }
   th,
   td {
@@ -533,7 +512,6 @@ $iconWidth: 1.6em;
 
 .vxe-input--date-label {
   position: relative;
-  line-height: 1;
   padding-top: 8%;
   &.is-notice {
     &:before {
@@ -625,7 +603,6 @@ $iconWidth: 1.6em;
   & > ul {
     height: 100%;
     overflow: hidden;
-    width: 3.4em;
     margin: 0;
     padding: 0;
     background-color: #fff;
@@ -633,15 +610,12 @@ $iconWidth: 1.6em;
     &:after {
       content: " ";
       display: block;
-      height: 8.7em;
     }
     &:hover {
       overflow-y: auto;
     }
     & > li {
       display: block;
-      height: 22px;
-      padding-left: 0.6em;
       &:hover {
         background-color: $vxe-input-date-picker-hover-background-color;
         cursor: pointer;
@@ -653,11 +627,9 @@ $iconWidth: 1.6em;
     }
   }
   .vxe-input--time-picker-minute-list {
-    left: 1.95em;
     border-left: 1px solid $vxe-table-popup-border-color;
   }
   .vxe-input--time-picker-second-list {
-    left: 3.9em;
     border-left: 1px solid $vxe-table-popup-border-color;
   }
 }
@@ -713,99 +685,135 @@ $iconWidth: 1.6em;
   }
 }
 
-.vxe-input--panel {
-  font-size: $vxe-font-size;
+@mixin getPanelStyle ($sizeIndex) {
+  $fontSizeList: $vxe-font-size, $vxe-font-size-medium, $vxe-font-size-small, $vxe-font-size-mini;
+  $timeWeekRowHeightList: $vxe-input-date-time-week-row-height-default, $vxe-input-date-time-week-row-height-medium, $vxe-input-date-time-week-row-height-small, $vxe-input-date-time-week-row-height-mini;
+  $monthYearRowHeightList: $vxe-input-date-month-year-row-height-default, $vxe-input-date-month-year-row-height-medium, $vxe-input-date-month-year-row-height-small, $vxe-input-date-month-year-row-height-mini;
+  $titleRowHeightList: $vxe-input-date-title-height-default, $vxe-input-date-title-height-medium, $vxe-input-date-title-height-small, $vxe-input-date-title-height-mini;
+  
+  font-size: nth($fontSizeList, $sizeIndex);
+  .vxe-input--panel-wrapper {
+    max-height: 400px - $sizeIndex * 20;
+  }
+  &.type--date,
+  &.type--week,
+  &.type--month,
+  &.type--year {
+    .vxe-input--panel-wrapper {
+      padding: 12px - $sizeIndex;
+    }
+  }
+  &.type--date,
+  &.type--month,
+  &.type--year {
+    .vxe-input--panel-wrapper {
+      $widthList: 336px, 336px, 312px, 288px;
+      width: nth($widthList, $sizeIndex);
+    }
+  }
+  &.type--week {
+    .vxe-input--panel-wrapper {
+      $widthList: 380px, 380px, 354px, 326px;
+      width: nth($widthList, $sizeIndex);
+    }
+  }
+  &.type--datetime {
+    .vxe-input--panel-left-wrapper {
+      $widthList: 336px, 336px, 312px, 288px;
+      width: nth($widthList, $sizeIndex);
+    }
+    .vxe-input--panel-left-wrapper,
+    .vxe-input--panel-right-wrapper {
+      padding: 12px - $sizeIndex;
+    }
+  }
+  .vxe-input--time-picker-title {
+    height: 31px - $sizeIndex;
+    line-height: 31px - $sizeIndex;
+    padding: 0 12px - $sizeIndex;
+  }
+  .vxe-input--date-picker-label,
+  .vxe-input--date-picker-btn {
+    height: 31px - $sizeIndex;
+    line-height: 31px - $sizeIndex;
+  }
+  .vxe-input--date-picker-btn-wrapper {
+    .vxe-input--date-picker-btn {
+      width: 31px - $sizeIndex;
+      margin-left: 9px - $sizeIndex;
+    }
+  }
+  .vxe-input--date-picker-type-wrapper {
+    .vxe-input--date-picker-label,
+    .vxe-input--date-picker-btn {
+      padding: 0 10px - $sizeIndex;
+    }
+  }
+  .vxe-input--time-picker-header,
+  .vxe-input--date-picker-header {
+    $paddingBottomList: 8px, 7px, 6px, 5px;
+    padding-bottom: nth($paddingBottomList, $sizeIndex);
+  }
   .vxe-input--date-picker-body table,
   .vxe-input--time-picker-body {
-    height: $vxe-input-date-time-week-row-height-default * 6 + $vxe-input-date-title-height-default;
+    height: nth($timeWeekRowHeightList, $sizeIndex) * 6 + nth($titleRowHeightList, $sizeIndex);
+  }
+  .vxe-input--time-picker-body {
+    $ulWidthList: 48px, 48px, 44px, 42px;
+    & > ul {
+      width: nth($ulWidthList, $sizeIndex);
+      &:before,
+      &:after {
+        $heightList: 120px, 120px, 110px, 100px;
+        height: nth($heightList, $sizeIndex);
+      }
+      & > li {
+        height: 22px;
+        padding-left: 10px - $sizeIndex;
+      }
+    }
+    .vxe-input--time-picker-minute-list {
+      left: nth($ulWidthList, $sizeIndex);
+    }
+    .vxe-input--time-picker-second-list {
+      left: nth($ulWidthList, $sizeIndex) * 2;
+    }
   }
   .vxe-input--date-day-view,
   .vxe-input--date-week-view {
     td {
-      height: $vxe-input-date-time-week-row-height-default;
+      height: nth($timeWeekRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--date-month-view,
   .vxe-input--date-year-view {
     td {
-      height: $vxe-input-date-month-year-row-height-default;
+      height: nth($monthYearRowHeightList, $sizeIndex);
     }
   }
   .vxe-input--date-picker-body {
     th {
-      height: $vxe-input-date-title-height-default;
+      height: nth($titleRowHeightList, $sizeIndex);
     }
   }
-  &.size--medium {
-    font-size: $vxe-font-size-medium;
-    .vxe-input--date-picker-body table,
-    .vxe-input--time-picker-body {
-      height: $vxe-input-date-time-week-row-height-medium * 6 + $vxe-input-date-title-height-medium;
-    }
-    .vxe-input--date-day-view,
-    .vxe-input--date-week-view {
-      td {
-        height: $vxe-input-date-time-week-row-height-medium;
-      }
-    }
-    .vxe-input--date-month-view,
-    .vxe-input--date-year-view {
-      td {
-        height: $vxe-input-date-month-year-row-height-medium;
-      }
-    }
-    .vxe-input--date-picker-body {
-      th {
-        height: $vxe-input-date-title-height-medium;
-      }
-    }
+  .vxe-input--time-picker-confirm {
+    height: 31px - $sizeIndex;
+    padding: 0 10px - $sizeIndex;
   }
-  &.size--small {
-    font-size: $vxe-font-size-small;
-    .vxe-input--date-picker-body table,
-    .vxe-input--time-picker-body {
-      height: $vxe-input-date-time-week-row-height-small * 6 + $vxe-input-date-title-height-small;
-    }
-    .vxe-input--date-day-view,
-    .vxe-input--date-week-view {
-      td {
-        height: $vxe-input-date-time-week-row-height-small;
-      }
-    }
-    .vxe-input--date-month-view,
-    .vxe-input--date-year-view {
-      td {
-        height: $vxe-input-date-month-year-row-height-small;
-      }
-    }
-    .vxe-input--date-picker-body {
-      th {
-        height: $vxe-input-date-title-height-small;
-      }
-    }
-  }
-  &.size--mini {
-    font-size: $vxe-font-size-mini;
-    .vxe-input--date-picker-body table,
-    .vxe-input--time-picker-body {
-      height: $vxe-input-date-time-week-row-height-mini * 6 + $vxe-input-date-title-height-mini;
-    }
-    .vxe-input--date-day-view,
-    .vxe-input--date-week-view {
-      td {
-        height: $vxe-input-date-time-week-row-height-mini;
-      }
-    }
-    .vxe-input--date-month-view,
-    .vxe-input--date-year-view {
-      td {
-        height: $vxe-input-date-month-year-row-height-mini;
-      }
-    }
-    .vxe-input--date-picker-body {
-      th {
-        height: $vxe-input-date-title-height-mini;
-      }
-    }
+  .vxe-input--date-label {
+    line-height: nth($fontSizeList, $sizeIndex) + 1;
+  }
+}
+
+.vxe-input--panel {
+  @include getPanelStyle(1);
+  &.size--medium {
+    @include getPanelStyle(2);
+  }
+  &.size--small {
+    @include getPanelStyle(3);
+  }
+  &.size--mini {
+    @include getPanelStyle(4);
   }
 }
diff --git a/styles/pulldown.scss b/styles/pulldown.scss
index b66dcd57a..0e1e65972 100644
--- a/styles/pulldown.scss
+++ b/styles/pulldown.scss
@@ -28,6 +28,8 @@
     transform: scaleY(0.5);
     transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
     transform-origin: center top;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
     &[data-placement="top"] {
       transform-origin: center bottom;
     }
diff --git a/styles/select.scss b/styles/select.scss
index 7af855b4d..b24e71713 100644
--- a/styles/select.scss
+++ b/styles/select.scss
@@ -52,6 +52,8 @@
     transform: scaleY(0.5);
     transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
     transform-origin: center top;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
     &[data-placement="top"] {
       transform-origin: center bottom;
     }
diff --git a/styles/table.scss b/styles/table.scss
index 7f3e7306e..af1650ccc 100644
--- a/styles/table.scss
+++ b/styles/table.scss
@@ -365,7 +365,8 @@
       }
     }
   }
-  .vxe-header--column {
+  .vxe-header--column,
+  .vxe-footer--column {
     &.col--ellipsis {
       &.col--center {
         .vxe-cell{
diff --git a/vue.config.js b/vue.config.js
index 38b123e40..1bac59d13 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -29,8 +29,8 @@ module.exports = {
     config.output
       .set('libraryExport', 'default')
       .set('library', 'VXETable')
-    if (process.env.npm_lifecycle_event.indexOf('lib') === 0) {
-      let XEUtils = {
+    if (process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.indexOf('lib') === 0) {
+      const XEUtils = {
         root: 'XEUtils',
         commonjs: 'xe-utils/methods/xe-utils',
         commonjs2: 'xe-utils/methods/xe-utils',