From 0d2839561042622664f696291b02aba24d6fd106 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Sat, 29 Jan 2022 10:42:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20table=20header=20=E4=B8=8E?=
 =?UTF-8?q?=20body=20=E7=9A=84=E6=BB=9A=E5=8A=A8=E5=90=8C=E6=AD=A5?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/table/index.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/component/table/index.vue b/src/component/table/index.vue
index 3e9171a6..20976db8 100644
--- a/src/component/table/index.vue
+++ b/src/component/table/index.vue
@@ -12,6 +12,7 @@ import {
   defineProps,
   withDefaults,
   defineEmits,
+  onMounted,
 } from "vue";
 import { Recordable } from "../../types";
 import { guid } from "../../utils/guidUtil";
@@ -109,6 +110,16 @@ const print = function () {
   window.location.reload();
   document.body.innerHTML = oldContent;
 };
+
+let tableHeader = ref<HTMLElement | null>(null);
+let tableBody = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  tableBody.value?.addEventListener('scroll', () => {
+    tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;  
+  })
+})
+
 </script>
 
 <template>
@@ -152,7 +163,7 @@ const print = function () {
 
       <div class="layui-table-box">
         <!-- 表格头部 -->
-        <div class="layui-table-header">
+        <div class="layui-table-header" ref="tableHeader">
           <table class="layui-table" :lay-size="size">
             <thead>
               <tr>
@@ -181,7 +192,7 @@ const print = function () {
           </table>
         </div>
         <!-- 表格数据 -->
-        <div class="layui-table-body layui-table-main">
+        <div class="layui-table-body layui-table-main" ref="tableBody">
           <table class="layui-table" :lay-size="size">
             <tbody>
               <template v-for="data in dataSource" :key="data">