fix: 🐛表头拖拽后左右高度不一致

src/components/common/GanttHeader.vue

@@ -1,5 +1,11 @@
 <template>
-  <table class="xg-gantt-header" cellpadding="0" cellspacing="0" border="0">
+  <table
+    class="xg-gantt-header"
+    :style="{ height: `${$param.headerHeight}px` }"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+  >
     <colgroup>
       <template v-for="i in dateList[1].length" :key="i">
         <col :width="`${ganttColumnWidth}px`" />
@@ -26,7 +32,9 @@
 import useData from '@/composables/useData';
 import useGanttWidth from '@/composables/useGanttWidth';
 import useStyle from '@/composables/useStyle';
+import useParam from '@/composables/useParam';
 
+const { $param } = useParam();
 const { $styleBox } = useStyle();
 const { dateList } = useData();
 const { ganttColumnWidth } = useGanttWidth();
@@ -35,7 +43,6 @@ const { ganttColumnWidth } = useGanttWidth();
 <style lang="scss" scoped>
 .xg-gantt-header {
   width: 100%;
-  height: 80px;
   background-color: blueviolet;
   table-layout: fixed;
   border-collapse: separate;

src/components/common/TableHeader.vue

@@ -1,29 +1,52 @@
 <template>
-  <table class="xg-table-header" cellpadding="0" cellspacing="0" border="0">
+  <table
+    ref="tableRef"
+    class="xg-table-header"
+    :style="{ height: `${$param.headerHeight}px` }"
+    cellpadding="0"
+    cellspacing="0"
+    border="0"
+  >
     <colgroup>
       <template v-for="(c, i) in $slotsBox.tableHeaders.leafs" :key="i">
         <col :width="c.width" />
       </template>
     </colgroup>
     <thead>
       <tr v-for="(r, trIndex) in $slotsBox.tableHeaders.headers" :key="trIndex">
-        <TableHeaderTh v-for="(c, i) in r" :key="i" :column="c" />
+        <TableHeaderTh
+          v-for="(c, i) in r"
+          :key="i"
+          :column="c"
+          @resize="onResize"
+        />
       </tr>
     </thead>
   </table>
 </template>
 
 <script lang="ts" setup>
-import TableHeaderTh from './TableHeaderTh.vue';
+import { nextTick, ref } from 'vue';
 import useSlotsBox from '@/composables/useSlotsBox';
+import useParams from '@/composables/useParam';
+import TableHeaderTh from './TableHeaderTh.vue';
+import Variables from '@/constants/vars';
 
 const { $slotsBox } = useSlotsBox();
+
+const { $param } = useParams();
+const tableRef = ref<HTMLElement | null>(null);
+const onResize = () => {
+  nextTick(() => {
+    const table = tableRef.value;
+    $param.headerHeight = table?.clientHeight ?? Variables.default.headerHeight;
+  });
+};
 </script>
 
 <style lang="scss" scoped>
 .xg-table-header {
   width: 100%;
-  height: 80px;
   background-color: blueviolet;
   table-layout: fixed;
   border-collapse: separate;

src/components/common/TableHeaderTh.vue

@@ -28,6 +28,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['resize']);
+
 const { $slotsBox } = useSlotsBox();
 
 const { $styleBox } = useStyle();
@@ -46,12 +48,14 @@ onResizeTableColumn(headerRef, {
   onEnd: x => {
     $slotsBox.tableHeaders.leafs[index].width = Math.max(
       $slotsBox.tableHeaders.leafs[index].width + x,
-      20
+      40
     );
+
+    emit('resize');
   },
 
   preMove: (x, clientX) => {
-    if ($slotsBox.tableHeaders.leafs[index].width + x < 20) return false;
+    if ($slotsBox.tableHeaders.leafs[index].width + x < 40) return false;
     return true;
   }
 });

src/models/param/param.ts

@@ -43,4 +43,13 @@ export default class Param {
   public set showMoveLine(v: boolean) {
     this._showMoveLine = v;
   }
+
+  private _headerHeight: number = 80;
+  public get headerHeight(): number {
+    return this._headerHeight;
+  }
+
+  public set headerHeight(v: number) {
+    this._headerHeight = v;
+  }
 }