fix(Table): 修复table fix 在表头分组中fixed固定位置错误问题 (#727)

Author: cuilanxin

packages/react-table/README.md

@@ -80,6 +80,11 @@ const columns = [
     style: { color: 'red' },
     key: 'name', 
     children: [
+       {
+        title: '英文名字',
+        width: 100,
+        key: 'name_en',
+      },
       {
         title: '中文名字',
         key: 'cnname',
@@ -90,7 +95,7 @@ const columns = [
             key: 'firstname',
             children:[
               { title: '姓', key: 'name1', width: 80 },
-              { title: '名', key: 'name2', width: 80 },
+              { title: '名',  key: 'name2', width: 80 },
             ]
           }, {
             title: '拼音',
@@ -101,14 +106,11 @@ const columns = [
             ],
           },
         ],
-      }, {
-        title: '英文名字',
-        width: 100,
-        key: 'name_en',
-      },
+      }, 
     ]
   }, {
     title: '其它',
+    key: 'other',
     children:[
       { title: '生日', key: 'birthday', width: 150 },
       { title: '职业', key: 'job', width: 150 },

packages/react-table/src/TableTr.tsx

@@ -115,9 +115,9 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                 }
                 if (keyName.fixed) {
                   if (keyName.fixed === 'right') {
-                    objs.className = `${objs.className} ${prefixCls}-fixed-right`;
+                    objs.className = `${prefixCls}-fixed-right`;
                   } else {
-                    objs.className = `${objs.className} ${prefixCls}-fixed-true`;
+                    objs.className = `${prefixCls}-fixed-true`;
                   }
                 }
                 return (
@@ -134,9 +134,14 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                       </span>
                     }
                     key={colNum}
-                    className={`${prefixCls}-tr-children-${keyName.align || 'left'}  ${keyName.className || ''} ${
-                      objs.className || ''
-                    }`}
+                    className={[
+                      prefixCls + '-tr-children-' + (keyName.align || 'left'),
+                      keyName.className,
+                      objs.className,
+                    ]
+                      .filter((it) => it)
+                      .join(' ')
+                      .trim()}
                     onClick={(evn) => onCell(trData, { rowNum, colNum, keyName: keyName.key! }, evn)}
                   />
                 );

packages/react-table/src/index.tsx

@@ -118,54 +118,46 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
       setLocationWidth(computed());
     }
   };
-  const deepClumnsLocation = (
-    params: Array<TableColumns<T> | number>,
-    fistIndex: number,
-    leftOrRight: 'left' | 'right',
-    isReverse: boolean,
-  ) => {
+  const deepClumnsLocation = (params: Array<TableColumns<T> | number>, fistIndex: number) => {
     let initialValue = 0,
-      lastIndex = isReverse ? 0 : params.length - 1,
+      headerIndex = 0,
       deepParams: Array<TableColumns<T> | number> = [];
-    params.forEach(() => {
-      let abs = Math.abs(lastIndex);
-      const i = `${fistIndex}${abs}`;
-      if (isReverse) {
-        lastIndex += 1;
-      } else {
-        lastIndex -= 1;
-      }
-      if (typeof params[abs] === 'number') {
-        initialValue = (params[abs] as number) + initialValue;
-        deepParams.push(params[abs]);
+    params.forEach((_, index) => {
+      const i = `${fistIndex}${headerIndex}`;
+      if (typeof params[index] === 'number') {
+        initialValue = (params[index] as number) + initialValue;
+        deepParams.push(params[index]);
         return;
       }
       if (finalLocationWidth.current[i]) {
-        finalLocationWidth.current[i][leftOrRight] = initialValue;
+        finalLocationWidth.current[i].left = initialValue;
         initialValue = finalLocationWidth.current[i].width + initialValue;
+        if (Array.isArray((params[index] as TableColumns<T>).children)) {
+          deepParams.push(...(params[index] as TableColumns<T>).children!);
+        } else {
+          deepParams.push(finalLocationWidth.current[i].width);
+        }
       }
-      if (Array.isArray((params[abs] as TableColumns<T>).children)) {
-        deepParams.push(...(params[abs] as TableColumns<T>).children!);
-        return;
+      headerIndex += 1;
+    });
+    (initialValue = 0), (headerIndex = header[fistIndex].length - 1);
+    for (let index = params.length - 1; index >= 0; index--) {
+      const i = `${fistIndex}${headerIndex}`;
+      if (typeof params[index] === 'number') {
+        initialValue = (params[index] as number) + initialValue;
+        continue;
       }
       if (finalLocationWidth.current[i]) {
-        deepParams.push(finalLocationWidth.current[i].width);
-      } else {
-        const parent = header.find((it) => it.find((it) => it.key === (params[abs] as TableColumns<T>).key)) || [];
-        const sub = parent.findIndex((it) => it.key === (params[abs] as TableColumns<T>).key);
-        if (finalLocationWidth.current[`${i[0]}${sub}`]) {
-          // 合并单元格
-          deepParams.push(finalLocationWidth.current[`${i[0]}${sub}`].width);
-        }
+        finalLocationWidth.current[i].right = initialValue;
+        initialValue = finalLocationWidth.current[i].width + initialValue;
       }
-    });
-    if (deepParams.filter((it) => typeof it !== 'number').length)
-      deepClumnsLocation(deepParams, fistIndex + 1, leftOrRight, isReverse);
+      headerIndex -= 1;
+    }
+    if (deepParams.filter((it) => typeof it !== 'number').length) deepClumnsLocation(deepParams, fistIndex + 1);
   };
 
   const computed = () => {
-    deepClumnsLocation(columns, 0, 'left', true);
-    deepClumnsLocation(columns, 0, 'right', false);
+    deepClumnsLocation(columns, 0);
     return finalLocationWidth.current;
   };
   useEffect(() => {
@@ -296,6 +288,7 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
   }, [scroll]);
   const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim();
   const { header, render, ellipsis } = getLevelItems(self.selfColumns);
+
   return (
     <React.Fragment>
       <div className={cls} {...other} style={{ ...other.style, ...style.div }}>