diff --git a/src/table/base-table/table-header.tsx b/src/table/base-table/table-header.tsx index 45c74d31fe..8acf080c1a 100644 --- a/src/table/base-table/table-header.tsx +++ b/src/table/base-table/table-header.tsx @@ -4,69 +4,115 @@ import { BaseTableCol, CellData } from '../type'; import baseTableProps from '../base-table-props'; import { prefix } from '../../config'; +type ThProps = { + rowspan: number; + colspan: number; + column: BaseTableCol; + index: number; + hasChildren: boolean; + isFirstColumn: boolean; +}; + export default defineComponent({ name: `${prefix}-table-header`, components: { TableCell, }, + props: { columns: baseTableProps.columns, bordered: baseTableProps.bordered, }, + + data() { + return { + cacheRowMaxRowspan: [], + }; + }, + methods: { renderHeader(): Array { - const trContentList: Array = []; - this.renderTr(this.columns, 0, trContentList); - const theadContent = trContentList.map((item: any) => {item}); - return theadContent; + const { bordered, cacheRowMaxRowspan } = this; + const trPropsList: Array> = []; + this.renderTr(this.columns, 0, trPropsList, true); + return trPropsList.map((thPropsList, rowindex) => { + const currentRowMaxRowspan = cacheRowMaxRowspan[rowindex] || 1; + return ( + + {thPropsList.map(({ column, rowspan, colspan, index, hasChildren, isFirstColumn }) => { + const withBorder = bordered && index === 0 && !isFirstColumn; + return this.renderCell(column, hasChildren ? rowspan : currentRowMaxRowspan, colspan, index, withBorder); + })} + + ); + }); }, - renderTr(columns: Array, currentRowIndex: number, trContentList: Array): any { - const thContent: Array = []; + renderTr( + columns: Array, + currentRowIndex: number, + trPropsList: Array, + isParentFirstColumn: boolean, + ): any { + const { cacheRowMaxRowspan } = this; + const currentRowThProps: Array = []; // 当前行 - if (typeof trContentList[currentRowIndex] === 'undefined') { + if (typeof trPropsList[currentRowIndex] === 'undefined') { // eslint-disable-next-line no-param-reassign - trContentList[currentRowIndex] = []; + trPropsList[currentRowIndex] = []; } - // 实际占用的列 - let currentColSpan = 0; - columns.forEach((column: BaseTableCol, colIndex: number) => { + if (typeof cacheRowMaxRowspan[currentRowIndex] === 'undefined') { + cacheRowMaxRowspan[currentRowIndex] = 1; + } + // 占用的列 + let colspan = 0; + // 占用的行 + let rowspan = 1; + columns.forEach((column: BaseTableCol, index: number) => { const { children } = column; if (children?.length) { - const colSpan = this.renderTr(children, currentRowIndex + 1, trContentList); - currentColSpan += colSpan; - thContent[colIndex] = this.renderCell(column, 1, colSpan, currentRowIndex, colIndex); + const isFirstColumn = isParentFirstColumn && index === 0; + const { colspan: occupiedCol, rowspan: occupiedRow } = this.renderTr( + children, + currentRowIndex + 1, + trPropsList, + isFirstColumn, + ); + colspan += occupiedCol; + rowspan += occupiedRow; + cacheRowMaxRowspan[currentRowIndex] = Math.max(rowspan, cacheRowMaxRowspan[currentRowIndex]); + currentRowThProps[index] = { + rowspan: 1, + colspan: occupiedCol, + column, + index, + hasChildren: true, + isFirstColumn: index === 0 && isParentFirstColumn, + }; } }); - let rowspan = 1; - if (trContentList.length >= 1) { - rowspan = trContentList.length - currentRowIndex; - } - // 普通单元格,也许会涉及跨行 - columns.forEach((column, colIndex: number) => { + // 普通单元格 + columns.forEach((column, index: number) => { const { children } = column; if (!children || children?.length === 0) { - // 上一行有跨行到当前行且单元格是当前行的第一列,要带上边框。 - const withBorder = - currentRowIndex > 0 && - this.bordered && - thContent.length === 0 && - trContentList[currentRowIndex].length === 0; - thContent[colIndex] = this.renderCell(column, rowspan, 1, colIndex, currentRowIndex, withBorder); - currentColSpan += 1; + currentRowThProps[index] = { + rowspan, + colspan: 1, + column, + index, + hasChildren: false, + isFirstColumn: index === 0 && isParentFirstColumn, + }; + colspan += 1; } }); - trContentList[currentRowIndex].push(...thContent); - return currentColSpan; + trPropsList[currentRowIndex].push(...currentRowThProps); + return { + colspan, + rowspan, + }; }, - renderCell( - column: BaseTableCol, - rowspan: number, - colspan: number, - colIndex: number, - currentRowIndex: number, - withBorder?: boolean, - ): VNode { + renderCell(column: BaseTableCol, rowspan: number, colspan: number, index: number, withBorder?: boolean): VNode { const { title, render } = column; const customData = { type: 'title', @@ -94,16 +140,14 @@ export default defineComponent({ const cellData = { col: column, - colIndex, + colIndex: index, customData, customRender, type: 'th', withBorder, }; - return ( - - ); + return ; }, }, render() { diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 28e028b1cf..1b6a85cce1 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -178,7 +178,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/collapse.vue correctly - +
+ +
`; @@ -296,7 +298,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/operation.vue correctl - +
+ +
`; @@ -319,7 +323,9 @@ exports[`ssr snapshot test renders ./examples/alert/demos/title.vue correctly 1` - +
+ +
`; @@ -8559,7 +8565,7 @@ exports[`ssr snapshot test renders ./examples/comment/demos/reply-form.vue corre
-
+ @@ -36313,7 +36319,7 @@ exports[`ssr snapshot test renders ./examples/table/demos/multi-header.vue corre 平台 类型及默认值 - 属性 + 属性 说明 diff --git a/test/unit/alert/__snapshots__/demo.test.js.snap b/test/unit/alert/__snapshots__/demo.test.js.snap index adc44efac4..76cba3b6ab 100644 --- a/test/unit/alert/__snapshots__/demo.test.js.snap +++ b/test/unit/alert/__snapshots__/demo.test.js.snap @@ -407,7 +407,23 @@ exports[`Alert Alert collapseVue demo works fine 1`] = ` - +
+ + + +
`; @@ -683,7 +699,23 @@ exports[`Alert Alert operationVue demo works fine 1`] = ` - +
+ + + +
`; @@ -741,7 +773,23 @@ exports[`Alert Alert titleVue demo works fine 1`] = ` - +
+ + + +
`; diff --git a/test/unit/comment/__snapshots__/demo.test.js.snap b/test/unit/comment/__snapshots__/demo.test.js.snap index df861fbdf9..850de5f122 100644 --- a/test/unit/comment/__snapshots__/demo.test.js.snap +++ b/test/unit/comment/__snapshots__/demo.test.js.snap @@ -586,14 +586,14 @@ exports[`Comment Comment replyFormVue demo works fine 1`] = ` diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap index 09c9edab95..77283f3ff0 100644 --- a/test/unit/table/__snapshots__/demo.test.js.snap +++ b/test/unit/table/__snapshots__/demo.test.js.snap @@ -8795,7 +8795,7 @@ exports[`Table Table multiHeaderVue demo works fine 1`] = ` class="t-align-left t-text-ellipsis test2" colspan="1" rowspan="2" - style="overflow: hidden;" + style="overflow: hidden; border-left: 1px solid #E7E7E7;" > 属性