fix(tableScrollSync): 改进表格滚动同步功能并修复样式问题，优化滚动同步功能，隐藏原生横向滚动条但保留纵向滚动条

添加自定义样式标签来美化滚动条外观

src/directives/tableScrollSync.js

@@ -18,8 +18,32 @@ function setupScrollSync(el) {
     console.warn('未找到 .el-table__body-wrapper，无法创建滚动同步');
     return null;
   }
-  bodyWrapper.style.scrollbarWidth = 'none';
-  bodyWrapper.style.msOverflowStyle = 'none';
+  // 隐藏原生横向滚动条，但保留纵向滚动条
+  bodyWrapper.style.overflowX = 'hidden';
+  bodyWrapper.style.overflowY = 'auto';
+  
+  // 创建自定义样式标签来隐藏横向滚动条
+  const styleId = 'v-scroll-sync-hide-x-scrollbar';
+  let styleEl = document.getElementById(styleId);
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    styleEl.textContent = `
+      .el-table__body-wrapper.v-scroll-sync-hide-x::-webkit-scrollbar {
+        width: 6px;
+        height: 0;
+      }
+      .el-table__body-wrapper.v-scroll-sync-hide-x::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .el-table__body-wrapper.v-scroll-sync-hide-x::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 3px;
+      }
+    `;
+    document.head.appendChild(styleEl);
+  }
+  bodyWrapper.classList.add('v-scroll-sync-hide-x');
   // 避免重复创建
   const existingDiv = table.querySelector('.v-scroll-sync-bar');
   if (existingDiv) existingDiv.remove();
@@ -36,15 +60,23 @@ function setupScrollSync(el) {
   };
   div.addEventListener('scroll', onScroll);
 
-  table.appendChild(div);
+  const tableContainer = table.querySelector('.el-table');
+
+  // 在tableContainer后面插入div（作为兄弟元素）
+  tableContainer.insertAdjacentElement('afterend', div);
+
+  // table.appendChild(div);
 
   // 返回清理函数和事件引用
   return {
     div,
+    bodyWrapper,
     handler: onScroll,
     destroy() {
       div.removeEventListener('scroll', onScroll);
       if (div.parentNode) div.parentNode.removeChild(div);
+      // 移除添加的class
+      bodyWrapper.classList.remove('v-scroll-sync-hide-x');
     }
   };
 }

src/views/saleManage/saleOrder/index.vue

@@ -34,246 +34,248 @@
               <el-tab-pane label="全部发货" name="800"></el-tab-pane>
             </el-tabs>
             <!-- 数据表格 -->
-            <ele-pro-table
-              ref="table"
-              :columns="columns"
-              :datasource="datasource"
-              height="calc(100vh - 400px)"
-              style="margin-bottom: 10px"
-              full-height="calc(100vh - 116px)"
-              tool-class="ele-toolbar-form"
-              :selection.sync="selection"
-              :page-size="20"
-              @columns-change="handleColumnChange"
-              :cache-key="cacheKeyUrl"
-              show-summary
-              :summary-method="getSummaries"
-            >
-              <!-- 表头工具栏 -->
-              <template v-slot:toolbar>
-                <el-button
-                  size="small"
-                  type="primary"
-                  icon="el-icon-plus"
-                  class="ele-btn-icon"
-                  @click="openEditNew('add', {})"
-                  v-if="$hasPermission('eom:saleorder:save')"
-                >
-                  新建
-                </el-button>
-                <el-button
-                  size="small"
-                  type="danger"
-                  icon="el-icon-delete"
-                  class="ele-btn-icon"
-                  @click="allDelBtn"
-                  v-if="$hasPermission('eom:saleorder:delete')"
-                  :disabled="selection?.length === 0"
-                >
-                  批量删除
-                </el-button>
-                <el-button
-                  size="small"
-                  type="primary"
-                  icon="el-icon-plus"
-                  class="ele-btn-icon"
-                  @click="invoiceAll"
-                  v-if="$hasPermission('eom:saleManage:invoiceAll')"
-                  :disabled="selection?.length === 0"
-                >
-                  批量发货
-                </el-button>
-                <el-button
-                  type="primary"
-                  size="small"
-                  icon="el-icon-upload2"
-                  @click="uploadFile"
-                  v-if="$hasPermission('eom:saleorder:save')"
-                  >导入</el-button
-                >
-                <exportButton
-                  fileName="销售订单"
-                  apiUrl="/eom/saleorder/export"
-                  :params="params"
-                ></exportButton>
+             <div v-table-scroll-sync class="table-container">
+              <ele-pro-table
+                ref="table"
+                :columns="columns"
+                :datasource="datasource"
+                height="calc(100vh - 400px)"
+                style="margin-bottom: 10px"
+                full-height="calc(100vh - 116px)"
+                tool-class="ele-toolbar-form"
+                :selection.sync="selection"
+                :page-size="20"
+                @columns-change="handleColumnChange"
+                :cache-key="cacheKeyUrl"
+                show-summary
+                :summary-method="getSummaries"
+              >
+                <!-- 表头工具栏 -->
+                <template v-slot:toolbar>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    icon="el-icon-plus"
+                    class="ele-btn-icon"
+                    @click="openEditNew('add', {})"
+                    v-if="$hasPermission('eom:saleorder:save')"
+                  >
+                    新建
+                  </el-button>
+                  <el-button
+                    size="small"
+                    type="danger"
+                    icon="el-icon-delete"
+                    class="ele-btn-icon"
+                    @click="allDelBtn"
+                    v-if="$hasPermission('eom:saleorder:delete')"
+                    :disabled="selection?.length === 0"
+                  >
+                    批量删除
+                  </el-button>
+                  <el-button
+                    size="small"
+                    type="primary"
+                    icon="el-icon-plus"
+                    class="ele-btn-icon"
+                    @click="invoiceAll"
+                    v-if="$hasPermission('eom:saleManage:invoiceAll')"
+                    :disabled="selection?.length === 0"
+                  >
+                    批量发货
+                  </el-button>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    icon="el-icon-upload2"
+                    @click="uploadFile"
+                    v-if="$hasPermission('eom:saleorder:save')"
+                    >导入</el-button
+                  >
+                  <exportButton
+                    fileName="销售订单"
+                    apiUrl="/eom/saleorder/export"
+                    :params="params"
+                  ></exportButton>
 
-                <el-button
-                  v-if="$hasPermission('eom:saleorder:push')"
-                  size="small"
-                  type="primary"
-                  class="ele-btn-icon"
-                  @click="allPushBtn"
-                  :disabled="selection?.length === 0"
-                >
-                  批量推送
-                </el-button>
-                <el-button
-                  :disabled="selection?.length === 0"
-                  type="primary"
-                  size="small"
-                  icon="el-icon-printer"
-                  @click="handlePrint()"
-                  v-if="$hasPermission('eom:saleorder:print')"
-                  >打印</el-button
-                >
-              </template>
+                  <el-button
+                    v-if="$hasPermission('eom:saleorder:push')"
+                    size="small"
+                    type="primary"
+                    class="ele-btn-icon"
+                    @click="allPushBtn"
+                    :disabled="selection?.length === 0"
+                  >
+                    批量推送
+                  </el-button>
+                  <el-button
+                    :disabled="selection?.length === 0"
+                    type="primary"
+                    size="small"
+                    icon="el-icon-printer"
+                    @click="handlePrint()"
+                    v-if="$hasPermission('eom:saleorder:print')"
+                    >打印</el-button
+                  >
+                </template>
 
-              <!-- 查看详情列 -->
-              <template v-slot:relationCode="{ row }">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="openRelationCodeDetail(row)"
-                >
-                  {{ row.relationCode }}
-                </el-link>
-              </template>
-              <template v-slot:orderNo="{ row }">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  @click="openorderDetail(row)"
-                >
-                  {{ row.orderNo }}
-                </el-link>
-              </template>
-              <!-- 预销售订单编码 -->
-              <template v-slot:preOrderNo="{ row }">
-                <el-input
-                  v-model="row.preOrderNo"
-                  @keyup.enter.native="handlePreOrderNoBlur(row)"
-                  style="width: 100%; padding: 0 4px"
-                  placeholder="请输入预销售编码"
-                ></el-input>
-              </template>
-              <!-- 操作列 -->
-              <template v-slot:action="{ row }">
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-edit"
-                  @click="openEditNew('edit', row)"
-                  v-if="
-                    $hasPermission('eom:saleorder:update') &&
-                    [0, 3].includes(row.orderStatus)
-                  "
-                >
-                  修改
-                </el-link>
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="saleOrderSubmitOrGenerate(row)"
-                  v-if="
-                    [0, 3].includes(row.orderStatus) &&
-                    $hasPermission('eom:saleorder:update')
-                  "
-                >
-                  提交
-                </el-link>
-                <!-- <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleAutoGenerate(row.id)"
-                  v-if="
-                    [2].includes(row.orderStatus) &&
-                    row.needProduce &&
-                    !!!row.purchasePlanNum
-                  "
-                >
-                  生成采购计划
-                </el-link> -->
+                <!-- 查看详情列 -->
+                <template v-slot:relationCode="{ row }">
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    @click="openRelationCodeDetail(row)"
+                  >
+                    {{ row.relationCode }}
+                  </el-link>
+                </template>
+                <template v-slot:orderNo="{ row }">
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    @click="openorderDetail(row)"
+                  >
+                    {{ row.orderNo }}
+                  </el-link>
+                </template>
+                <!-- 预销售订单编码 -->
+                <template v-slot:preOrderNo="{ row }">
+                  <el-input
+                    v-model="row.preOrderNo"
+                    @keyup.enter.native="handlePreOrderNoBlur(row)"
+                    style="width: 100%; padding: 0 4px"
+                    placeholder="请输入预销售编码"
+                  ></el-input>
+                </template>
+                <!-- 操作列 -->
+                <template v-slot:action="{ row }">
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-edit"
+                    @click="openEditNew('edit', row)"
+                    v-if="
+                      $hasPermission('eom:saleorder:update') &&
+                      [0, 3].includes(row.orderStatus)
+                    "
+                  >
+                    修改
+                  </el-link>
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="saleOrderSubmitOrGenerate(row)"
+                    v-if="
+                      [0, 3].includes(row.orderStatus) &&
+                      $hasPermission('eom:saleorder:update')
+                    "
+                  >
+                    提交
+                  </el-link>
+                  <!-- <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleAutoGenerate(row.id)"
+                    v-if="
+                      [2].includes(row.orderStatus) &&
+                      row.needProduce &&
+                      !!!row.purchasePlanNum
+                    "
+                  >
+                    生成采购计划
+                  </el-link> -->
 
-                <el-popconfirm
-                  class="ele-action"
-                  title="确定要删除此信息吗？"
-                  @confirm="remove([row.id])"
-                  v-if="
-                    [0, 3].includes(row.orderStatus) &&
-                    $hasPermission('eom:saleorder:delete')
-                  "
-                >
-                  <template v-slot:reference>
-                    <el-link
-                      type="danger"
-                      :underline="false"
-                      icon="el-icon-delete"
-                    >
-                      删除
-                    </el-link>
-                  </template>
-                </el-popconfirm>
+                  <el-popconfirm
+                    class="ele-action"
+                    title="确定要删除此信息吗？"
+                    @confirm="remove([row.id])"
+                    v-if="
+                      [0, 3].includes(row.orderStatus) &&
+                      $hasPermission('eom:saleorder:delete')
+                    "
+                  >
+                    <template v-slot:reference>
+                      <el-link
+                        type="danger"
+                        :underline="false"
+                        icon="el-icon-delete"
+                      >
+                        删除
+                      </el-link>
+                    </template>
+                  </el-popconfirm>
 
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleCommand('adjustment', row)"
-                  v-if="row.allowDifference == 1 && $hasPermission('eom:saleorder:adjustment')"
-                >
-                  冲差
-                </el-link>
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleCommand('invoice', row)"
-                  v-if="
-                    [2].includes(row.orderStatus) &&
-                    ((row.saleTypeName.includes('受托') &&
-                      row.isEntrustedReceive == 1) ||
-                      !row.saleTypeName.includes('受托')) &&
-                    $hasPermission('eom:saleordersendrecord:save') &&
-                    ((isTotalCount == '1' &&
-                      row.sendTotalCount < row.productCount) ||
-                      isTotalCount == 0)
-                  "
-                >
-                  发货单
-                </el-link>
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleCommand('entrustedReceive', row)"
-                  v-if="
-                    [2].includes(row.orderStatus) &&
-                    row.saleTypeName.includes('受托') &&
-                    row.isEntrustedReceive != 1
-                  "
-                >
-                  受托收货单
-                </el-link>
-                <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleCommand('saleOrderReminder', row)"
-                  v-if="
-                    [2].includes(row.orderStatus) &&
-                    clientEnvironmentId != 5 &&
-                    row.progress < 800
-                  "
-                >
-                  催单
-                </el-link>
-                <!-- <el-link
-                  type="primary"
-                  :underline="false"
-                  icon="el-icon-plus"
-                  @click="handleCommand('invoiceManage', row)"
-                  v-if="
-                    [2].includes(row.orderStatus) &&
-                    !row.hasInvoiceApply &&
-                    $hasPermission('eom:fininvoiceapply:save')
-                  "
-                >
-                  新增发票
-                </el-link> -->
-              </template>
-            </ele-pro-table>
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleCommand('adjustment', row)"
+                    v-if="row.allowDifference == 1 && $hasPermission('eom:saleorder:adjustment')"
+                  >
+                    冲差
+                  </el-link>
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleCommand('invoice', row)"
+                    v-if="
+                      [2].includes(row.orderStatus) &&
+                      ((row.saleTypeName.includes('受托') &&
+                        row.isEntrustedReceive == 1) ||
+                        !row.saleTypeName.includes('受托')) &&
+                      $hasPermission('eom:saleordersendrecord:save') &&
+                      ((isTotalCount == '1' &&
+                        row.sendTotalCount < row.productCount) ||
+                        isTotalCount == 0)
+                    "
+                  >
+                    发货单
+                  </el-link>
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleCommand('entrustedReceive', row)"
+                    v-if="
+                      [2].includes(row.orderStatus) &&
+                      row.saleTypeName.includes('受托') &&
+                      row.isEntrustedReceive != 1
+                    "
+                  >
+                    受托收货单
+                  </el-link>
+                  <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleCommand('saleOrderReminder', row)"
+                    v-if="
+                      [2].includes(row.orderStatus) &&
+                      clientEnvironmentId != 5 &&
+                      row.progress < 800
+                    "
+                  >
+                    催单
+                  </el-link>
+                  <!-- <el-link
+                    type="primary"
+                    :underline="false"
+                    icon="el-icon-plus"
+                    @click="handleCommand('invoiceManage', row)"
+                    v-if="
+                      [2].includes(row.orderStatus) &&
+                      !row.hasInvoiceApply &&
+                      $hasPermission('eom:fininvoiceapply:save')
+                    "
+                  >
+                    新增发票
+                  </el-link> -->
+                </template>
+              </ele-pro-table>
+            </div>
           </div>
         </div>
         <div v-if="activeComp == 'invoice'">