From 7a692f4b9cffeef920bab6a2fafca8ae2b5c6381 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Fri, 13 Nov 2020 17:08:45 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=B7=B2=E7=9F=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/views/table/base/Sort.vue            | 12 ++++++++++--
 examples/views/table/edit/CascadingSelect.vue |  2 ++
 examples/views/table/edit/Click.vue           |  2 ++
 examples/views/table/edit/DBLClick.vue        |  2 ++
 examples/views/table/edit/DataCount.vue       |  2 ++
 examples/views/table/edit/Events.vue          |  2 ++
 examples/views/table/edit/Expand.vue          |  2 ++
 examples/views/table/edit/Form.vue            |  2 ++
 examples/views/table/edit/PopupForm.vue       |  2 ++
 examples/views/table/edit/RealtimeSave.vue    |  2 ++
 examples/views/table/edit/Span.vue            |  2 ++
 examples/views/table/edit/UniqueSelect.vue    |  2 ++
 examples/views/table/grid/Basic.vue           |  2 ++
 examples/views/table/grid/ConfigProxy.vue     |  2 ++
 examples/views/table/grid/CustomToolbar.vue   |  2 ++
 examples/views/table/grid/Edit.vue            |  2 ++
 examples/views/table/grid/Footer.vue          |  2 ++
 examples/views/table/grid/Form.vue            |  2 ++
 examples/views/table/grid/FormProxy.vue       |  2 ++
 package.json                                  |  2 +-
 packages/table/src/body.js                    | 13 +------------
 21 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/examples/views/table/base/Sort.vue b/examples/views/table/base/Sort.vue
index 94a9706da..0fcfd5c9e 100644
--- a/examples/views/table/base/Sort.vue
+++ b/examples/views/table/base/Sort.vue
@@ -43,7 +43,11 @@
       height="300"
       :data="tableData2">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
-      <vxe-table-column field="name" title="Name" :sort-by="sortNameMethod" sortable></vxe-table-column>
+      <vxe-table-column field="name" title="Name" :sort-by="sortNameMethod2" sortable>
+        <template #default="{ row }">
+          <span style="color: red;">名字：{{ row.name }}</span>
+        </template>
+      </vxe-table-column>
       <vxe-table-column field="role" title="指定字段排序 num" sort-by="num" sortable></vxe-table-column>
       <vxe-table-column field="num" title="Num" sortable></vxe-table-column>
     </vxe-table>
@@ -211,7 +215,11 @@ export default {
           height="300"
           :data="tableData2">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
-          <vxe-table-column field="name" title="Name" :sort-by="sortNameMethod" sortable></vxe-table-column>
+          <vxe-table-column field="name" title="Name" :sort-by="sortNameMethod2" sortable>
+            <template #default="{ row }">
+              <span style="color: red;">名字：{{ row.name }}</span>
+            </template>
+          </vxe-table-column>
           <vxe-table-column field="role" title="指定字段排序 num" sort-by="num" sortable></vxe-table-column>
           <vxe-table-column field="num" title="Num" sortable></vxe-table-column>
         </vxe-table>
diff --git a/examples/views/table/edit/CascadingSelect.vue b/examples/views/table/edit/CascadingSelect.vue
index 499e1c108..695a690cb 100644
--- a/examples/views/table/edit/CascadingSelect.vue
+++ b/examples/views/table/edit/CascadingSelect.vue
@@ -11,6 +11,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       ref="xTable"
       max-height="400"
       :data="tableData"
@@ -68,6 +69,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           ref="xTable"
           max-height="400"
           :data="tableData"
diff --git a/examples/views/table/edit/Click.vue b/examples/views/table/edit/Click.vue
index 9bb01ddd7..1d38f0a69 100644
--- a/examples/views/table/edit/Click.vue
+++ b/examples/views/table/edit/Click.vue
@@ -5,6 +5,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       :data="tableData"
       :edit-config="{trigger: 'click', mode: 'cell'}">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -81,6 +82,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           :data="tableData"
           :edit-config="{trigger: 'click', mode: 'cell'}">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
diff --git a/examples/views/table/edit/DBLClick.vue b/examples/views/table/edit/DBLClick.vue
index f7a005116..5700a96d2 100644
--- a/examples/views/table/edit/DBLClick.vue
+++ b/examples/views/table/edit/DBLClick.vue
@@ -5,6 +5,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       :data="tableData"
       :edit-config="{trigger: 'dblclick', mode: 'cell'}">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -76,6 +77,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           :data="tableData"
           :edit-config="{trigger: 'dblclick', mode: 'cell'}">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
diff --git a/examples/views/table/edit/DataCount.vue b/examples/views/table/edit/DataCount.vue
index 641162631..038b55479 100644
--- a/examples/views/table/edit/DataCount.vue
+++ b/examples/views/table/edit/DataCount.vue
@@ -8,6 +8,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       show-footer
       :data="tableData"
       :footer-method="footerMethod"
@@ -50,6 +51,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           show-footer
           :data="tableData"
           :footer-method="footerMethod"
diff --git a/examples/views/table/edit/Events.vue b/examples/views/table/edit/Events.vue
index 4cd70a63f..0eedb3c95 100644
--- a/examples/views/table/edit/Events.vue
+++ b/examples/views/table/edit/Events.vue
@@ -5,6 +5,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       :data="tableData"
       :edit-config="{trigger: 'click', mode: 'cell'}">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -43,6 +44,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           :data="tableData"
           :edit-config="{trigger: 'click', mode: 'cell'}">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
diff --git a/examples/views/table/edit/Expand.vue b/examples/views/table/edit/Expand.vue
index 40834b4a1..80090686c 100644
--- a/examples/views/table/edit/Expand.vue
+++ b/examples/views/table/edit/Expand.vue
@@ -5,6 +5,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       :data="tableData"
       :edit-config="{trigger: 'click', mode: 'cell'}">
       <vxe-table-column type="seq" width="60"></vxe-table-column>
@@ -58,6 +59,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           :data="tableData"
           :edit-config="{trigger: 'click', mode: 'cell'}">
           <vxe-table-column type="seq" width="60"></vxe-table-column>
diff --git a/examples/views/table/edit/Form.vue b/examples/views/table/edit/Form.vue
index 8d5a46a15..e8dbf3bc8 100644
--- a/examples/views/table/edit/Form.vue
+++ b/examples/views/table/edit/Form.vue
@@ -26,6 +26,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       :loading="loading"
       :data="tableData"
       :edit-config="{trigger: 'click', mode: 'cell'}">
@@ -86,6 +87,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           :loading="loading"
           :data="tableData"
           :edit-config="{trigger: 'click', mode: 'cell'}">
diff --git a/examples/views/table/edit/PopupForm.vue b/examples/views/table/edit/PopupForm.vue
index f12bff755..fd12b588a 100644
--- a/examples/views/table/edit/PopupForm.vue
+++ b/examples/views/table/edit/PopupForm.vue
@@ -12,6 +12,7 @@
       border
       resizable
       row-key
+      show-overflow
       highlight-hover-row
       ref="xTable"
       height="500"
@@ -110,6 +111,7 @@ export default {
           border
           resizable
           row-key
+          show-overflow
           highlight-hover-row
           ref="xTable"
           height="500"
diff --git a/examples/views/table/edit/RealtimeSave.vue b/examples/views/table/edit/RealtimeSave.vue
index b44dc4cf1..d45fffa2f 100644
--- a/examples/views/table/edit/RealtimeSave.vue
+++ b/examples/views/table/edit/RealtimeSave.vue
@@ -6,6 +6,7 @@
       border
       resizable
       keep-source
+      show-overflow
       ref="xTable"
       :data="tableData"
       :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'fa fa-pencil'}"
@@ -42,6 +43,7 @@ export default {
           border
           resizable
           keep-source
+          show-overflow
           ref="xTable"
           :data="tableData"
           :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, icon: 'fa fa-pencil'}"
diff --git a/examples/views/table/edit/Span.vue b/examples/views/table/edit/Span.vue
index dd53cc3a3..c680544f6 100644
--- a/examples/views/table/edit/Span.vue
+++ b/examples/views/table/edit/Span.vue
@@ -12,6 +12,7 @@
 
     <vxe-table
       border
+      show-overflow
       ref="xTable"
       height="500"
       :loading="loading"
@@ -72,6 +73,7 @@ export default {
 
         <vxe-table
           border
+          show-overflow
           ref="xTable"
           height="500"
           :loading="loading"
diff --git a/examples/views/table/edit/UniqueSelect.vue b/examples/views/table/edit/UniqueSelect.vue
index 644a1897d..02c0e30f6 100644
--- a/examples/views/table/edit/UniqueSelect.vue
+++ b/examples/views/table/edit/UniqueSelect.vue
@@ -11,6 +11,7 @@
     <vxe-table
       border
       resizable
+      show-overflow
       ref="xTable"
       max-height="400"
       :data="tableData"
@@ -77,6 +78,7 @@ export default {
         <vxe-table
           border
           resizable
+          show-overflow
           ref="xTable"
           max-height="400"
           :data="tableData"
diff --git a/examples/views/table/grid/Basic.vue b/examples/views/table/grid/Basic.vue
index 0cdb04d25..d6f56f895 100644
--- a/examples/views/table/grid/Basic.vue
+++ b/examples/views/table/grid/Basic.vue
@@ -7,6 +7,7 @@
     <vxe-grid
       border
       resizable
+      show-overflow
       height="300"
       :align="allAlign"
       :columns="tableColumn"
@@ -54,6 +55,7 @@ export default {
         <vxe-grid
           border
           resizable
+          show-overflow
           height="300"
           :align="allAlign"
           :columns="tableColumn"
diff --git a/examples/views/table/grid/ConfigProxy.vue b/examples/views/table/grid/ConfigProxy.vue
index 862efff12..064cb8501 100644
--- a/examples/views/table/grid/ConfigProxy.vue
+++ b/examples/views/table/grid/ConfigProxy.vue
@@ -5,6 +5,7 @@
     <vxe-grid
       resizable
       keep-source
+      show-overflow
       height="528"
       :filter-config="{remote: true}"
       :toolbar-config="tableToolbar"
@@ -181,6 +182,7 @@ export default {
             return {
               xGridOptions: {
                 resizable: true,
+                showOverflow: true,
                 height: 528,
                 filterConfig: {
                   remote: true
diff --git a/examples/views/table/grid/CustomToolbar.vue b/examples/views/table/grid/CustomToolbar.vue
index dc4db839e..1d480ecef 100644
--- a/examples/views/table/grid/CustomToolbar.vue
+++ b/examples/views/table/grid/CustomToolbar.vue
@@ -6,6 +6,7 @@
       border
       resizable
       keep-source
+      show-overflow
       ref="xGrid"
       height="530"
       id="toolbar_demo_2"
@@ -74,6 +75,7 @@ export default {
           border
           resizable
           keep-source
+          show-overflow
           ref="xGrid"
           height="530"
           id="toolbar_demo_2"
diff --git a/examples/views/table/grid/Edit.vue b/examples/views/table/grid/Edit.vue
index 30a900552..6bedbfa20 100644
--- a/examples/views/table/grid/Edit.vue
+++ b/examples/views/table/grid/Edit.vue
@@ -6,6 +6,7 @@
       border
       resizable
       keep-source
+      show-overflow
       ref="xGrid"
       height="530"
       :loading="loading"
@@ -66,6 +67,7 @@ export default {
           border
           resizable
           keep-source
+          show-overflow
           ref="xGrid"
           height="530"
           :loading="loading"
diff --git a/examples/views/table/grid/Footer.vue b/examples/views/table/grid/Footer.vue
index 3da778f35..6b202baea 100644
--- a/examples/views/table/grid/Footer.vue
+++ b/examples/views/table/grid/Footer.vue
@@ -9,6 +9,7 @@
       border
       stripe
       resizable
+      show-overflow
       show-footer
       height="500"
       :export-config="{}"
@@ -50,6 +51,7 @@ export default {
           border
           stripe
           resizable
+          show-overflow
           show-footer
           height="500"
           :export-config="{}"
diff --git a/examples/views/table/grid/Form.vue b/examples/views/table/grid/Form.vue
index 48e7ecdf5..24248cc1f 100644
--- a/examples/views/table/grid/Form.vue
+++ b/examples/views/table/grid/Form.vue
@@ -5,6 +5,7 @@
     <vxe-grid
       resizable
       border
+      show-overflow
       height="400"
       :export-config="{}"
       :loading="loading"
@@ -61,6 +62,7 @@ export default {
         <vxe-grid
           resizable
           border
+          show-overflow
           height="400"
           :export-config="{}"
           :loading="loading"
diff --git a/examples/views/table/grid/FormProxy.vue b/examples/views/table/grid/FormProxy.vue
index 351b707e9..427d8171b 100644
--- a/examples/views/table/grid/FormProxy.vue
+++ b/examples/views/table/grid/FormProxy.vue
@@ -5,6 +5,7 @@
     <vxe-grid
       resizable
       border
+      show-overflow
       height="400"
       :export-config="{}"
       :pager-config="tablePage"
@@ -66,6 +67,7 @@ export default {
         <vxe-grid
           resizable
           border
+          show-overflow
           height="400"
           :export-config="{}"
           :loading="loading"
diff --git a/package.json b/package.json
index 202068613..3c41b1256 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.0.0-beta.22",
+  "version": "3.0.0-beta.23",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/packages/table/src/body.js b/packages/table/src/body.js
index 8e55e8cf4..dda9895d2 100644
--- a/packages/table/src/body.js
+++ b/packages/table/src/body.js
@@ -365,9 +365,6 @@ function renderRows (h, _vm, $xetable, $seq, rowLevel, fixedType, tableData, tab
 
 /**
  * 同步滚动条
- * scroll 方式：可以使固定列与内容保持一致的滚动效果，实现相对麻烦
- * mousewheel 方式：对于同步滚动效果就略差了，左右滚动，内容跟随即可
- * css3 translate 方式：对于同步滚动效果会有产生卡顿感觉，虽然可以利用硬件加速，渲染性能略优，但失去table布局能力
  */
 let scrollProcessTimeout
 function syncBodyScroll (scrollTop, elem1, elem2) {
@@ -388,7 +385,7 @@ function syncBodyScroll (scrollTop, elem1, elem2) {
       if (elem2) {
         elem2.onscroll = elem2._onscroll
       }
-    }, 100)
+    }, 300)
   }
 }
 
@@ -577,14 +574,6 @@ export default {
       }
       if (scrollXLoad && isX) {
         $xetable.triggerScrollXEvent(evnt)
-        if (headerElem && scrollLeft + bodyElem.clientWidth >= bodyElem.scrollWidth - 80) {
-          // 修复拖动滚动条时可能存在不同步问题
-          this.$nextTick(() => {
-            if (bodyElem.scrollLeft !== headerElem.scrollLeft) {
-              headerElem.scrollLeft = bodyElem.scrollLeft
-            }
-          })
-        }
       }
       if (scrollYLoad && isY) {
         $xetable.triggerScrollYEvent(evnt)