diff --git a/docs/en-US/component/descriptions.md b/docs/en-US/component/descriptions.md index 306bb9020e..3dca6070a1 100644 --- a/docs/en-US/component/descriptions.md +++ b/docs/en-US/component/descriptions.md @@ -31,6 +31,14 @@ descriptions/vertical-list ::: +## Rowspan ^(2.8.1) + +:::demo + +descriptions/rowspan + +::: + ## Customized Style :::demo @@ -68,6 +76,7 @@ descriptions/customized-style | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- | | label | label text | ^[string] | '' | | span | colspan of column | ^[number] | 1 | +| rowspan ^(2.8.1) | the number of rows a cell should span | ^[number] | 1 | | width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | ^[string] / ^[number] | '' | | min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number] | '' | | align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left | diff --git a/docs/examples/descriptions/rowspan.vue b/docs/examples/descriptions/rowspan.vue new file mode 100644 index 0000000000..0392bf95aa --- /dev/null +++ b/docs/examples/descriptions/rowspan.vue @@ -0,0 +1,52 @@ + diff --git a/packages/components/descriptions/src/description-item.ts b/packages/components/descriptions/src/description-item.ts index b67a008181..32db51e38a 100644 --- a/packages/components/descriptions/src/description-item.ts +++ b/packages/components/descriptions/src/description-item.ts @@ -18,6 +18,13 @@ export const descriptionItemProps = buildProps({ type: Number, default: 1, }, + /** + * @description the number of rows a cell should span + */ + rowspan: { + type: Number, + default: 1, + }, /** * @description column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) */ diff --git a/packages/components/descriptions/src/description.vue b/packages/components/descriptions/src/description.vue index 3f12ba59e2..3d7f22528f 100644 --- a/packages/components/descriptions/src/description.vue +++ b/packages/components/descriptions/src/description.vue @@ -82,10 +82,25 @@ const getRows = () => { let temp: DescriptionItemVNode[] = [] let count = props.column let totalSpan = 0 // all spans number of item + const rowspanTemp: number[] = [] // the number of row spans children.forEach((node, index) => { const span = node.props?.span || 1 + const rowspan = node.props?.rowspan || 1 + const rowNo = rows.length + rowspanTemp[rowNo] ||= 0 + if (rowspan > 1) { + for (let i = 1; i < rowspan; i++) { + rowspanTemp[rowNo + i] ||= 0 + rowspanTemp[rowNo + i]++ + totalSpan++ + } + } + if (rowspanTemp[rowNo] > 0) { + count -= rowspanTemp[rowNo] + rowspanTemp[rowNo] = 0 + } if (index < children.length - 1) { totalSpan += span > count ? count : span } diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts index 36919460f9..69301b8213 100644 --- a/packages/components/descriptions/src/descriptions-cell.ts +++ b/packages/components/descriptions/src/descriptions-cell.ts @@ -47,6 +47,7 @@ export default defineComponent({ const label = this.cell?.children?.label?.() || item.label const content = this.cell?.children?.default?.() const span = item.span + const rowspan = item.rowspan const align = item.align ? `is-${item.align}` : '' const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : '' || align const className = item.className @@ -73,6 +74,7 @@ export default defineComponent({ labelClassName, ], colSpan: isVertical ? span : 1, + rowspan: isVertical ? 1 : rowspan, }, label ), @@ -93,6 +95,7 @@ export default defineComponent({ className, ], colSpan: isVertical ? span : span * 2 - 1, + rowspan: isVertical ? rowspan * 2 - 1 : rowspan, }, content ), @@ -106,6 +109,7 @@ export default defineComponent({ style, class: [ns.e('cell'), align], colSpan: span, + rowspan, }, [ !isNil(label) diff --git a/packages/components/descriptions/src/descriptions.type.ts b/packages/components/descriptions/src/descriptions.type.ts index 58a86b9490..bc8c56782a 100644 --- a/packages/components/descriptions/src/descriptions.type.ts +++ b/packages/components/descriptions/src/descriptions.type.ts @@ -12,6 +12,7 @@ export interface IDescriptionsInject { export interface IDescriptionsItemInject { label: string span: number + rowspan: number width: string | number minWidth: string | number align: string