Fix sticky layout failure when switching fixed columns

Author: huangshuwei

packages/ve-table/src/body/index.jsx

@@ -1,7 +1,7 @@
 import BodyTr from "./body-tr";
 import ExpandTr from "./expand-tr";
 import VueDomResizeObserver from "../../../src/comps/resize-observer";
-import { clsName } from "../util";
+import { clsName, getDomResizeObserverCompKey } from "../util";
 import { getValByUnit } from "../../../src/utils/index.js";
 import emitter from "../../../src/mixins/emitter";
 import {
@@ -19,6 +19,10 @@ export default {
     name: COMPS_NAME.VE_TABLE_BODY,
     mixins: [emitter],
     props: {
+        columnsOptionResetTime: {
+            type: Number,
+            default: 0
+        },
         colgroups: {
             type: Array,
             required: true
@@ -796,7 +800,10 @@ export default {
                 <tr style="height:0;">
                     {colgroups.map(column => {
                         const measureTdProps = {
-                            key: column.key,
+                            key: getDomResizeObserverCompKey(
+                                column.key,
+                                this.columnsOptionResetTime
+                            ),
                             props: {
                                 tagName: "td",
                                 id: column.key

packages/ve-table/src/header/header-tr.jsx

@@ -1,12 +1,16 @@
 import HeaderTh from "./header-th";
-import { clsName } from "../util";
+import { clsName, getDomResizeObserverCompKey } from "../util";
 import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
 import VueDomResizeObserver from "../../../src/comps/resize-observer";
 import emitter from "../../../src/mixins/emitter";
 export default {
     name: COMPS_NAME.VE_TABLE_THADER_TR,
     mixins: [emitter],
     props: {
+        columnsOptionResetTime: {
+            type: Number,
+            default: 0
+        },
         // group columns item
         groupColumn: {
             type: Array,
@@ -148,6 +152,10 @@ export default {
         };
 
         const trProps = {
+            key: getDomResizeObserverCompKey(
+                rowIndex,
+                this.columnsOptionResetTime
+            ),
             class: clsName("header-tr"),
             props: {
                 tagName: "tr"

packages/ve-table/src/header/index.jsx

@@ -5,6 +5,10 @@ import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
 export default {
     name: COMPS_NAME.VE_TABLE_THADER,
     props: {
+        columnsOptionResetTime: {
+            type: Number,
+            default: 0
+        },
         groupColumns: {
             type: Array,
             required: true
@@ -137,6 +141,8 @@ export default {
                     const trProps = {
                         key: rowIndex,
                         props: {
+                            columnsOptionResetTime: this
+                                .columnsOptionResetTime,
                             groupColumn,
                             headerRows,
                             colgroups,

packages/ve-table/src/index.jsx

@@ -163,6 +163,11 @@ export default {
     },
     data() {
         return {
+            /*
+            列配置变化次数
+            依赖columns 配置渲染，都需要重新计算：粘性布局时，重新触发 on-dom-resize-change 事件
+            */
+            columnsOptionResetTime: 0,
             tableContainerRef: "tableContainerRef",
             tableContentRef: "tableContentRef",
             virtualPhantomRef: "virtualPhantomRef",
@@ -409,7 +414,10 @@ export default {
             immediate: true
         },
         columns: {
-            handler() {
+            handler(newVal, oldVal) {
+                if (newVal != oldVal) {
+                    this.columnsOptionResetTime++;
+                }
                 this.initColumns();
                 this.initGroupColumns();
             },
@@ -988,6 +996,7 @@ export default {
         const headerProps = {
             class: clsName("header"),
             props: {
+                columnsOptionResetTime: this.columnsOptionResetTime,
                 groupColumns,
                 colgroups,
                 fixedHeader,
@@ -1003,6 +1012,7 @@ export default {
         const bodyProps = {
             class: [clsName("body"), this.tableBodyClass],
             props: {
+                columnsOptionResetTime: this.columnsOptionResetTime,
                 colgroups,
                 expandOption,
                 checkboxOptipon,