!486 fix(table): 存在多个 fixed 表头，固定表头偏移异常

jevin98 · sleeprite · commit 30e968d43b5a · 2025-05-22T15:50:46.000Z
* fix(table): 存在fixed表头，偏移异常
diff --git a/packages/component/component/table/__tests__/table.test.tsx b/packages/component/component/table/__tests__/table.test.tsx
@@ -823,4 +823,62 @@ describe("LayTable", () => {
 
     expect((checkboxComponent as any).vm.modelValue).toBeFalsy();
   });
+
+  // https://gitee.com/layui-vue/layui-vue/issues/IC9S5Q
+  test("一级表头存在两个fixed为left表头，第二个表头会覆盖第一列", async () => {
+    const columns = [
+      { title: "用户", width: "80px", key: "name", fixed: "left" as const },
+      { title: "城市", width: "80px", key: "city", fixed: "left" as const },
+    ];
+
+    const dataSource = ref([]);
+
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayTable
+            columns={columns}
+            dataSource={dataSource.value}
+          ></LayTable>
+        );
+      },
+    });
+
+    await nextTick()
+
+    const ths = wrapper.findAll(".layui-table-header .layui-table-header-wrapper tr th");
+
+    const style = ths[1].attributes().style
+
+    expect(style).toMatch(/left/)
+    expect(style).toMatch(/80px/)
+  });
+
+  test("一级表头存在两个fixed为left表头，存在 layui-table-fixed-left-last 类名", async () => {
+    const columns = [
+      { title: "用户", width: "80px", key: "name", fixed: "left" as const },
+      { title: "城市", width: "80px", key: "city", fixed: "left" as const },
+    ];
+
+    const dataSource = ref([]);
+
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <LayTable
+            columns={columns}
+            dataSource={dataSource.value}
+          ></LayTable>
+        );
+      },
+    });
+
+    await nextTick()
+
+    const ths = wrapper.findAll(".layui-table-header .layui-table-header-wrapper tr th");
+
+    const _class = ths[1].attributes().class
+
+    expect(_class).toMatch(/layui-table-fixed-left-last/)
+  });
 });
diff --git a/packages/component/component/table/hooks/useTable.ts b/packages/component/component/table/hooks/useTable.ts
@@ -11,7 +11,7 @@ import {
   isReactive,
   reactive,
   ref,
-
+  toRaw,
   watch,
   watchEffect,
 } from "vue";
@@ -273,7 +273,7 @@ export function useTable(props: RequiredTableProps, emit: TableEmit) {
       const _columns = isLeft ? props.columns : [...props.columns].reverse();
 
       let index
-        = _columns.findIndex(column => isEqual(column, topColumn)) - 1;
+        = _columns.findIndex(column => isEqual(column, toRaw(topColumn))) - 1;
       const fixedColumns = [];
 
       while (index > -1) {
@@ -316,12 +316,12 @@ export function useTable(props: RequiredTableProps, emit: TableEmit) {
       column => column.fixed === "right",
     );
 
-    if (isEqual(topColumn, topLastLeft)) {
+    if (isEqual(toRaw(topColumn), topLastLeft)) {
       loopJudge(topColumn, "left")
       && (lastLeftClassName = lastLeftClassNameConstant);
     }
 
-    if (isEqual(topColumn, topFirstRight)) {
+    if (isEqual(toRaw(topColumn), topFirstRight)) {
       loopJudge(topColumn, "right")
       && (firstRightClassName = firstRightClassNameConstant);
     }
diff --git a/packages/component/component/table/typing.ts b/packages/component/component/table/typing.ts
@@ -96,7 +96,7 @@ interface TableBaseColumn {
 }
 
 export type TableColumn =
-  (TableBaseColumn & { type: undefined; key: string }) |
+  (TableBaseColumn & { type?: undefined; key: string }) |
   (TableBaseColumn & { type: string; key?: string });
 
 export type FixedDirectionType =

Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ interface TableBaseColumn {`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`export type TableColumn =`
`99`		`- (TableBaseColumn & { type: undefined; key: string }) \|`
	`99`	`+ (TableBaseColumn & { type?: undefined; key: string }) \|`
`100`	`100`	`(TableBaseColumn & { type: string; key?: string });`
`101`	`101`
`102`	`102`	`export type FixedDirectionType =`