refactor: 增加固定列调整逻辑

Author: ArgoZhang

src/BootstrapBlazor/Components/Table/Table.razor.js

@@ -586,9 +586,10 @@ const setResizeListener = table => {
                 const marginX = eventX - originalX
                 table.tables.forEach(t => {
                     const group = [...t.children].find(i => i.nodeName === 'COLGROUP')
+                    const calcColWidth = colWidth + marginX;
                     if (group) {
                         const curCol = group.children.item(colIndex)
-                        curCol.style.width = `${colWidth + marginX}px`
+                        curCol.style.setProperty('width', `${calcColWidth}px`);
                         const tableEl = curCol.closest('table')
                         let width = tableWidth + marginX
                         if (t.closest('.table-fixed-body')) {
@@ -606,6 +607,22 @@ const setResizeListener = table => {
                                 tip.update();
                             }
                         }
+
+                        const header = col.parentElement;
+                        if (header.classList.contains('fixed')) {
+                            resizeNextFixedColumnWidth(header, calcColWidth);
+                        }
+                    }
+
+                    const tbody = [...t.children].find(i => i.nodeName === 'TBODY');
+                    if (tbody) {
+                        const rows = [...tbody.children].filter(i => i.nodeName === 'TR');
+                        rows.forEach(row => {
+                            const header = row.children.item(colIndex);
+                            if (header.classList.contains('fixed')) {
+                                resizeNextFixedColumnWidth(header, calcColWidth);
+                            }
+                        });
                     }
                 })
             },
@@ -624,6 +641,25 @@ const setResizeListener = table => {
     })
 }
 
+const resizeNextFixedColumnWidth = (col, width) => {
+    if (col.classList.contains('fixed-right')) {
+        const nextColumn = col.previousElementSibling;
+        if (nextColumn.classList.contains('fixed')) {
+            const right = parseFloat(col.style.getPropertyValue('right'));
+            nextColumn.style.setProperty('right', `${right + width}px`);
+            resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+        }
+    }
+    else if (col.classList.contains('fixed')) {
+        const nextColumn = col.nextElementSibling;
+        if (nextColumn.classList.contains('fixed')) {
+            const left = parseFloat(col.style.getPropertyValue('left'));
+            nextColumn.style.setProperty('left', `${left + width}px`);
+            resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth);
+        }
+    }
+}
+
 const setColumnResizingListen = (table, col) => {
     if (table.options.showColumnWidthTooltip) {
         EventHandler.on(col, 'mouseenter', e => {