feat(components): [descriptions] add rowspan (#10314)

* feat(components): [descriptions] add rowspan

* fix: type error

* Update docs/en-US/component/descriptions.md

Co-authored-by: btea <2356281422@qq.com>

* chore: format

---------

Co-authored-by: qiang <qw13131wang@gmail.com>
Co-authored-by: btea <2356281422@qq.com>

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    |

docs/examples/descriptions/rowspan.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-descriptions title="Width horizontal list" border>
+    <el-descriptions-item
+      :rowspan="2"
+      :width="140"
+      label="Photo"
+      align="center"
+    >
+      <el-image
+        style="width: 100px; height: 100px"
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      />
+    </el-descriptions-item>
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+
+  <el-descriptions
+    title="Width vertical list"
+    direction="vertical"
+    border
+    style="margin-top: 20px"
+  >
+    <el-descriptions-item
+      :rowspan="2"
+      :width="140"
+      label="Photo"
+      align="center"
+    >
+      <el-image
+        style="width: 100px; height: 100px"
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      />
+    </el-descriptions-item>
+    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
+    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
+    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
+    <el-descriptions-item label="Remarks">
+      <el-tag size="small">School</el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item label="Address">
+      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
+    </el-descriptions-item>
+  </el-descriptions>
+</template>

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)
    */

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
     }

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)

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