From 8f761841e77e3b15b16e31d04f6aca987a5e4bcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E5=85=B0=E9=91=AB?= <1192065030@qq.com> Date: Wed, 30 Mar 2022 17:10:49 +0800 Subject: [PATCH] =?UTF-8?q?fix(Table):=20=E4=BF=AE=E5=A4=8Dtable=20fix=20?= =?UTF-8?q?=E5=9C=A8=E8=A1=A8=E5=A4=B4=E5=88=86=E7=BB=84=E4=B8=ADfixed?= =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#727)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-table/README.md | 14 ++++--- packages/react-table/src/TableTr.tsx | 15 ++++--- packages/react-table/src/index.tsx | 63 +++++++++++++--------------- 3 files changed, 46 insertions(+), 46 deletions(-) diff --git a/packages/react-table/README.md b/packages/react-table/README.md index de95f97d6c..d60b6be4d7 100644 --- a/packages/react-table/README.md +++ b/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 }, diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx index fcfceb5515..e9da4362d4 100644 --- a/packages/react-table/src/TableTr.tsx +++ b/packages/react-table/src/TableTr.tsx @@ -115,9 +115,9 @@ export default function TableTr(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(props: TableTr } 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)} /> ); diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 81023bc333..51ccb40cce 100644 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -118,54 +118,46 @@ export default function Table(props: TablePro setLocationWidth(computed()); } }; - const deepClumnsLocation = ( - params: Array | number>, - fistIndex: number, - leftOrRight: 'left' | 'right', - isReverse: boolean, - ) => { + const deepClumnsLocation = (params: Array | number>, fistIndex: number) => { let initialValue = 0, - lastIndex = isReverse ? 0 : params.length - 1, + headerIndex = 0, deepParams: Array | 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).children)) { + deepParams.push(...(params[index] as TableColumns).children!); + } else { + deepParams.push(finalLocationWidth.current[i].width); + } } - if (Array.isArray((params[abs] as TableColumns).children)) { - deepParams.push(...(params[abs] as TableColumns).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).key)) || []; - const sub = parent.findIndex((it) => it.key === (params[abs] as TableColumns).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(props: TablePro }, [scroll]); const cls = [prefixCls, className, bordered ? `${prefixCls}-bordered` : null].filter(Boolean).join(' ').trim(); const { header, render, ellipsis } = getLevelItems(self.selfColumns); + return (