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 (