From 39b69d5bd003d1770c78c093e8de9a23e5ec5585 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= <ljc.byte@gmail.com>
Date: Tue, 7 Jan 2025 10:51:03 +0800
Subject: [PATCH] fix(descriptions): fixes the issue related to the layout
 distribution of span (#3409)

---
 .../components/descriptions/README.en-US.md   |   4 +-
 .../components/descriptions/README.zh-CN.md   |   4 +-
 .../components/descriptions/TEMPLATE.md       |   2 +
 .../descriptions/__demo__/example.md          | 102 +++++++++++++++
 .../__test__/__snapshots__/demo.test.ts.snap  | 116 +++++++++++++++++-
 .../components/descriptions/context.ts        |  10 --
 .../descriptions/descriptions-item.vue        |  52 +-------
 .../components/descriptions/descriptions.tsx  | 103 +++++-----------
 .../components/descriptions/interface.ts      |   1 +
 9 files changed, 257 insertions(+), 137 deletions(-)
 create mode 100644 packages/web-vue/components/descriptions/__demo__/example.md
 delete mode 100644 packages/web-vue/components/descriptions/context.ts

diff --git a/packages/web-vue/components/descriptions/README.en-US.md b/packages/web-vue/components/descriptions/README.en-US.md
index 331fccd05..81a2b75e0 100644
--- a/packages/web-vue/components/descriptions/README.en-US.md
+++ b/packages/web-vue/components/descriptions/README.en-US.md
@@ -18,6 +18,8 @@ description: Generally used for the information display of the detail page.
 
 @import ./__demo__/layout.md
 
+@import ./__demo__/example.md
+
 ## API
 
 
@@ -67,6 +69,6 @@ description: Generally used for the information display of the detail page.
 |---|---|---|:---:|
 |label|Label|`string \| RenderFunction`|`-`|
 |value|Data|`string \| RenderFunction`|`-`|
-|span|number of columns|`number`|`-`|
+|span|number of columns|`number`|`1`|
 
 
diff --git a/packages/web-vue/components/descriptions/README.zh-CN.md b/packages/web-vue/components/descriptions/README.zh-CN.md
index 26b180627..d6d3e6e19 100644
--- a/packages/web-vue/components/descriptions/README.zh-CN.md
+++ b/packages/web-vue/components/descriptions/README.zh-CN.md
@@ -16,6 +16,8 @@ description: 一般用于详情页的信息展示。
 
 @import ./__demo__/layout.md
 
+@import ./__demo__/example.md
+
 ## API
 
 
@@ -65,6 +67,6 @@ description: 一般用于详情页的信息展示。
 |---|---|---|:---:|
 |label|标签|`string \| RenderFunction`|`-`|
 |value|数据|`string \| RenderFunction`|`-`|
-|span|所占列数|`number`|`-`|
+|span|所占列数|`number`|`1`|
 
 
diff --git a/packages/web-vue/components/descriptions/TEMPLATE.md b/packages/web-vue/components/descriptions/TEMPLATE.md
index bd47a4032..3eebdc89f 100644
--- a/packages/web-vue/components/descriptions/TEMPLATE.md
+++ b/packages/web-vue/components/descriptions/TEMPLATE.md
@@ -27,6 +27,8 @@ description: Generally used for the information display of the detail page.
 
 @import ./__demo__/layout.md
 
+@import ./__demo__/example.md
+
 ## API
 
 %%API(descriptions.tsx)%%
diff --git a/packages/web-vue/components/descriptions/__demo__/example.md b/packages/web-vue/components/descriptions/__demo__/example.md
new file mode 100644
index 000000000..436b11cd0
--- /dev/null
+++ b/packages/web-vue/components/descriptions/__demo__/example.md
@@ -0,0 +1,102 @@
+```yaml
+title:
+  zh-CN: 布局示例
+  en-US: Layout Example
+```
+
+## zh-CN
+`span` 所占列数大于 `column` 可放置的数据个数时，`span` 会被设置为 `column` 的值，当行剩余列数不够放置下一列时将自动换行，每行末尾列会自动填充剩余量。
+
+---
+
+## en-US
+When the number of columns occupied by `span` is greater than the number of data that can be placed in `column`, `span` will be set to the value of `column`. When the remaining columns in the row are not enough to place the next column, it will automatically wrap, and the last column of each row will automatically fill the remaining amount.
+
+---
+
+```vue
+<template>
+  <a-form :model="form" auto-label-width>
+    <a-form-item label="size">
+      <a-radio-group v-model="form.size" type="button" :options="sizeOptions" />
+    </a-form-item>
+
+    <a-form-item label="layout">
+      <a-radio-group
+        v-model="form.layout"
+        type="button"
+        :options="layoutOptions"
+      />
+    </a-form-item>
+
+    <a-form-item label="table-layout">
+      <a-radio-group
+        v-model="form.tableLayout"
+        type="button"
+        :options="['auto', 'fixed']"
+      />
+    </a-form-item>
+
+    <a-form-item label="column">
+      <a-radio-group
+        v-model="form.column"
+        type="button"
+        :options="columnOptions"
+      />
+    </a-form-item>
+
+    <a-form-item label="firstSpan">
+      <a-radio-group
+        v-model="form.firstSpan"
+        type="button"
+        :options="firstSpanOptions"
+      />
+    </a-form-item>
+  </a-form>
+  <div style="margin-top: 20px">
+    <a-descriptions
+      title="Layout Example"
+      :size="form.size"
+      :column="form.column"
+      :layout="form.layout"
+      :table-layout="form.tableLayout"
+      bordered
+    >
+      <a-descriptions-item label="Item1" :span="form.firstSpan">
+        <div>Span：{{form.firstSpan}}
+          <span v-if="form.firstSpan > form.column" style="color: red;">
+            Exceeds Column, set to Column size
+          </span>
+        </div>
+      </a-descriptions-item>
+      <a-descriptions-item label="Item2" :span="2">Span：2</a-descriptions-item>
+      <a-descriptions-item label="Item3" :span="3">Span：3</a-descriptions-item>
+      <a-descriptions-item label="Item4" :span="2">Span：2</a-descriptions-item>
+      <a-descriptions-item label="Item5" :span="1">Span：1</a-descriptions-item>
+      <a-descriptions-item label="Item6" :span="1">Span：1</a-descriptions-item>
+    </a-descriptions>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const form = reactive({
+  size: 'medium',
+  layout: 'horizontal',
+  column: 4,
+  tableLayout: 'auto',
+  firstSpan: 2
+});
+
+const layoutOptions = [
+  'horizontal',
+  'inline-horizontal',
+  'vertical',
+  'inline-vertical',
+];
+const columnOptions = [1, 2, 3, 4, 5];
+const firstSpanOptions = [1, 2, 3, 4, 5];
+const sizeOptions = ['mini', 'small', 'medium', 'large'];
+</script>
+```
diff --git a/packages/web-vue/components/descriptions/__test__/__snapshots__/demo.test.ts.snap b/packages/web-vue/components/descriptions/__test__/__snapshots__/demo.test.ts.snap
index 8b1ab6ab6..427a0a8d7 100644
--- a/packages/web-vue/components/descriptions/__test__/__snapshots__/demo.test.ts.snap
+++ b/packages/web-vue/components/descriptions/__test__/__snapshots__/demo.test.ts.snap
@@ -142,17 +142,17 @@ exports[`<descriptions> demo: render [basic] correctly 1`] = `
           <tbody>
             <tr class=\\"arco-descriptions-row\\">
               <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Name</td>
-              <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Socrates<!--v-if--><!--v-if--></span></td>
+              <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"5\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Socrates<!--v-if--><!--v-if--></span></td>
               <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Mobile</td>
               <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->123-1234-1234<!--v-if--><!--v-if--></span></td>
+            </tr>
+            <tr class=\\"arco-descriptions-row\\">
               <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Residence</td>
               <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Beijing<!--v-if--><!--v-if--></span></td>
               <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Hometown</td>
               <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Beijing<!--v-if--><!--v-if--></span></td>
-            </tr>
-            <tr class=\\"arco-descriptions-row\\">
               <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Address</td>
-              <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"7\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Yingdu Building, Zhichun Road, Beijing<!--v-if--><!--v-if--></span></td>
+              <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"3\\"><span class=\\"arco-tag arco-tag-size-medium arco-tag-checked\\"><!--v-if-->Yingdu Building, Zhichun Road, Beijing<!--v-if--><!--v-if--></span></td>
             </tr>
           </tbody>
         </table>
@@ -188,6 +188,114 @@ exports[`<descriptions> demo: render [bordered] correctly 1`] = `
 </div>"
 `;
 
+exports[`<descriptions> demo: render [example] correctly 1`] = `
+"<form class=\\"arco-form arco-form-layout-horizontal arco-form-size-medium arco-form-auto-label-width\\">
+  <div class=\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\">
+    <div class=\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\"><label class=\\"arco-form-item-label\\">
+        <!--v-if-->size
+        <!--v-if-->
+        <!--v-if-->
+      </label></div>
+    <div class=\\"arco-col arco-form-item-wrapper-col\\" style=\\"flex-basis: auto;\\">
+      <div class=\\"arco-form-item-content-wrapper\\">
+        <div class=\\"arco-form-item-content arco-form-item-content-flex\\"><span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"mini\\"><span class=\\"arco-radio-button-content\\">mini</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"small\\"><span class=\\"arco-radio-button-content\\">small</span></label><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"medium\\"><span class=\\"arco-radio-button-content\\">medium</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"large\\"><span class=\\"arco-radio-button-content\\">large</span></label></span></div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\">
+    <div class=\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\"><label class=\\"arco-form-item-label\\">
+        <!--v-if-->layout
+        <!--v-if-->
+        <!--v-if-->
+      </label></div>
+    <div class=\\"arco-col arco-form-item-wrapper-col\\" style=\\"flex-basis: auto;\\">
+      <div class=\\"arco-form-item-content-wrapper\\">
+        <div class=\\"arco-form-item-content arco-form-item-content-flex\\"><span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"horizontal\\"><span class=\\"arco-radio-button-content\\">horizontal</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"inline-horizontal\\"><span class=\\"arco-radio-button-content\\">inline-horizontal</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"vertical\\"><span class=\\"arco-radio-button-content\\">vertical</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"inline-vertical\\"><span class=\\"arco-radio-button-content\\">inline-vertical</span></label></span></div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\">
+    <div class=\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\"><label class=\\"arco-form-item-label\\">
+        <!--v-if-->table-layout
+        <!--v-if-->
+        <!--v-if-->
+      </label></div>
+    <div class=\\"arco-col arco-form-item-wrapper-col\\" style=\\"flex-basis: auto;\\">
+      <div class=\\"arco-form-item-content-wrapper\\">
+        <div class=\\"arco-form-item-content arco-form-item-content-flex\\"><span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"auto\\"><span class=\\"arco-radio-button-content\\">auto</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"fixed\\"><span class=\\"arco-radio-button-content\\">fixed</span></label></span></div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\">
+    <div class=\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\"><label class=\\"arco-form-item-label\\">
+        <!--v-if-->column
+        <!--v-if-->
+        <!--v-if-->
+      </label></div>
+    <div class=\\"arco-col arco-form-item-wrapper-col\\" style=\\"flex-basis: auto;\\">
+      <div class=\\"arco-form-item-content-wrapper\\">
+        <div class=\\"arco-form-item-content arco-form-item-content-flex\\"><span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"1\\"><span class=\\"arco-radio-button-content\\">1</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"2\\"><span class=\\"arco-radio-button-content\\">2</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"3\\"><span class=\\"arco-radio-button-content\\">3</span></label><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"4\\"><span class=\\"arco-radio-button-content\\">4</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"5\\"><span class=\\"arco-radio-button-content\\">5</span></label></span></div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <div class=\\"arco-row arco-row-nowrap arco-row-align-start arco-row-justify-start arco-form-item arco-form-item-layout-horizontal\\">
+    <div class=\\"arco-col arco-col-5 arco-form-item-label-col arco-form-item-label-col-flex\\"><label class=\\"arco-form-item-label\\">
+        <!--v-if-->firstSpan
+        <!--v-if-->
+        <!--v-if-->
+      </label></div>
+    <div class=\\"arco-col arco-form-item-wrapper-col\\" style=\\"flex-basis: auto;\\">
+      <div class=\\"arco-form-item-content-wrapper\\">
+        <div class=\\"arco-form-item-content arco-form-item-content-flex\\"><span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"1\\"><span class=\\"arco-radio-button-content\\">1</span></label><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"2\\"><span class=\\"arco-radio-button-content\\">2</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"3\\"><span class=\\"arco-radio-button-content\\">3</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"4\\"><span class=\\"arco-radio-button-content\\">4</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"5\\"><span class=\\"arco-radio-button-content\\">5</span></label></span></div>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+</form>
+<div style=\\"margin-top: 20px;\\">
+  <div class=\\"arco-descriptions arco-descriptions-layout-horizontal arco-descriptions-size-medium arco-descriptions-border\\">
+    <div class=\\"arco-descriptions-title\\">Layout Example</div>
+    <div class=\\"arco-descriptions-body\\">
+      <table class=\\"arco-descriptions-table\\">
+        <tbody>
+          <tr class=\\"arco-descriptions-row\\">
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item1</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"3\\">
+              <div>Span：2
+                <!--v-if-->
+              </div>
+            </td>
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item2</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"3\\">Span：2</td>
+          </tr>
+          <tr class=\\"arco-descriptions-row\\">
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item3</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"7\\">Span：3</td>
+          </tr>
+          <tr class=\\"arco-descriptions-row\\">
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item4</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"3\\">Span：2</td>
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item5</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\">Span：1</td>
+            <td class=\\"arco-descriptions-item-label arco-descriptions-item-label-block\\" style=\\"text-align: left;\\">Item6</td>
+            <td class=\\"arco-descriptions-item-value arco-descriptions-item-value-block\\" style=\\"text-align: left;\\" colspan=\\"1\\">Span：1</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`<descriptions> demo: render [layout] correctly 1`] = `
 "<span class=\\"arco-radio-group-button arco-radio-group-size-medium arco-radio-group-direction-horizontal\\"><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"mini\\"><span class=\\"arco-radio-button-content\\">mini</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"small\\"><span class=\\"arco-radio-button-content\\">small</span></label><label class=\\"arco-radio-button arco-radio-checked\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"medium\\"><span class=\\"arco-radio-button-content\\">medium</span></label><label class=\\"arco-radio-button\\"><input type=\\"radio\\" class=\\"arco-radio-target\\" value=\\"large\\"><span class=\\"arco-radio-button-content\\">large</span></label></span>
 <div style=\\"margin-top: 20px;\\">
diff --git a/packages/web-vue/components/descriptions/context.ts b/packages/web-vue/components/descriptions/context.ts
deleted file mode 100644
index de8a9c69a..000000000
--- a/packages/web-vue/components/descriptions/context.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { InjectionKey } from 'vue';
-import { DescItemData } from './interface';
-
-export interface DescriptionsContext {
-  addItem: (id: number, data: DescItemData) => void;
-  removeItem: (id: number) => void;
-}
-
-export const descriptionsInjectionKey: InjectionKey<DescriptionsContext> =
-  Symbol('ArcoDescriptions');
diff --git a/packages/web-vue/components/descriptions/descriptions-item.vue b/packages/web-vue/components/descriptions/descriptions-item.vue
index 20e4db452..725c53e74 100644
--- a/packages/web-vue/components/descriptions/descriptions-item.vue
+++ b/packages/web-vue/components/descriptions/descriptions-item.vue
@@ -3,20 +3,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  getCurrentInstance,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  onUpdated,
-  reactive,
-  ref,
-  toRefs,
-} from 'vue';
+import { defineComponent } from 'vue';
 import { getPrefixCls } from '../_utils/global-config';
-import { DescriptionsContext, descriptionsInjectionKey } from './context';
-import { useIndex } from '../_hooks/use-index';
 
 export default defineComponent({
   name: 'DescriptionsItem',
@@ -43,44 +31,8 @@ export default defineComponent({
    * @slot label
    * @version 2.18.0
    */
-  setup(props) {
-    const { span } = toRefs(props);
+  setup() {
     const prefixCls = getPrefixCls('descriptions');
-    const descCtx = inject(descriptionsInjectionKey, {} as DescriptionsContext);
-    const instance = getCurrentInstance();
-    const itemRef = ref<HTMLElement>();
-
-    const { computedIndex } = useIndex({
-      itemRef,
-      selector: `.${prefixCls}-item-value`,
-      parentClassName: `${prefixCls}-table`,
-    });
-
-    const itemData = reactive({
-      index: computedIndex.value,
-      span: span.value,
-    });
-
-    if (instance?.uid) {
-      descCtx.addItem?.(instance.uid, itemData);
-    }
-
-    const getItemRef = () => {
-      const itemEle = (instance?.proxy?.$el as Node).parentElement;
-      if (itemEle && itemEle !== itemRef.value) {
-        itemRef.value = itemEle;
-      }
-    };
-
-    onMounted(() => getItemRef());
-
-    onUpdated(() => getItemRef());
-
-    onBeforeUnmount(() => {
-      if (instance?.uid) {
-        descCtx.removeItem?.(instance.uid);
-      }
-    });
 
     return {
       prefixCls,
diff --git a/packages/web-vue/components/descriptions/descriptions.tsx b/packages/web-vue/components/descriptions/descriptions.tsx
index 73f2cfb07..4a345376a 100644
--- a/packages/web-vue/components/descriptions/descriptions.tsx
+++ b/packages/web-vue/components/descriptions/descriptions.tsx
@@ -1,28 +1,14 @@
 import type { PropType, VNode, CSSProperties } from 'vue';
-import {
-  computed,
-  defineComponent,
-  isVNode,
-  provide,
-  reactive,
-  toRefs,
-} from 'vue';
+import { computed, defineComponent, isVNode, toRefs } from 'vue';
 import type { Size, TextAlign } from '../_utils/constant';
 import { getPrefixCls } from '../_utils/global-config';
 import { isFunction, isObject } from '../_utils/is';
-import { descriptionsInjectionKey } from './context';
-import { DescData, DescItemData, RenderData } from './interface';
+import { DescData, RenderData } from './interface';
 import { getAllElements, isSlotsChildren } from '../_utils/vue-utils';
 import { useResponsiveState } from '../grid/hook/use-responsive-state';
 import { ResponsiveValue } from '../grid';
 import { useSize } from '../_hooks/use-size';
 
-const getTotalSpan = (renderData?: RenderData[]) => {
-  return renderData
-    ? renderData.reduce((total, data) => total + data.span, 0)
-    : 0;
-};
-
 export default defineComponent({
   name: 'Descriptions',
   props: {
@@ -153,68 +139,43 @@ export default defineComponent({
       ...props.valueStyle,
     }));
 
-    const descItemMap = reactive(new Map<number, DescItemData>());
-    const sortedSpans = computed(() =>
-      Array.from(descItemMap.values())
-        .sort((a, b) => a.index - b.index)
-        .map((data) => data.span)
-    );
-
-    const addItem = (id: number, data: DescItemData) => {
-      descItemMap.set(id, data);
-    };
-
-    const removeItem = (id: number) => {
-      descItemMap.delete(id);
-    };
-
-    provide(
-      descriptionsInjectionKey,
-      reactive({
-        addItem,
-        removeItem,
-      })
-    );
-
     const getGroupedData = (data: (DescData | VNode)[]) => {
       const groupedData: RenderData[][] = [];
-      data.forEach((item, index) => {
+      let currentRow: RenderData[] = [];
+      let currentSpan = 0;
+
+      const addRow = () => {
+        if (currentRow.length) {
+          // fill the rest span，not needed, can be removed.
+          const restSpan = computedColumn.value - currentSpan;
+          currentRow[currentRow.length - 1].span += restSpan;
+          groupedData.push(currentRow);
+        }
+      };
+
+      data.forEach((item) => {
         const itemSpan = Math.min(
-          (isVNode(item) ? sortedSpans.value[index] : item.span) ?? 1,
+          (isVNode(item) ? item.props?.span : item.span) ?? 1,
           computedColumn.value
         );
-        const lastData = groupedData[groupedData.length - 1];
-        const lastDataTotalSpan = getTotalSpan(lastData);
-        if (
-          lastDataTotalSpan === 0 ||
-          lastDataTotalSpan >= computedColumn.value
-        ) {
-          // add item to new row
-          groupedData.push([
-            {
-              data: item,
-              span: itemSpan,
-            },
-          ]);
-        } else {
-          // add item to current row
-          lastData.push({
-            data: item,
-            span:
-              itemSpan + lastDataTotalSpan > computedColumn.value
-                ? computedColumn.value - lastDataTotalSpan
-                : itemSpan,
-          });
+
+        // add item to new row
+        if (currentSpan + itemSpan > computedColumn.value) {
+          addRow();
+
+          currentRow = [];
+          currentSpan = 0;
         }
+
+        currentRow.push({
+          data: item,
+          span: itemSpan,
+        });
+        currentSpan += itemSpan;
       });
-      if (groupedData.length) {
-        const lastData = groupedData[groupedData.length - 1];
-        const lastDataTotalSpan = getTotalSpan(lastData);
-        if (lastDataTotalSpan < computedColumn.value) {
-          lastData[lastData.length - 1].span +=
-            computedColumn.value - lastDataTotalSpan;
-        }
-      }
+
+      addRow();
+
       return groupedData;
     };
 
diff --git a/packages/web-vue/components/descriptions/interface.ts b/packages/web-vue/components/descriptions/interface.ts
index 21161c795..856bc79c6 100644
--- a/packages/web-vue/components/descriptions/interface.ts
+++ b/packages/web-vue/components/descriptions/interface.ts
@@ -14,6 +14,7 @@ export interface DescData {
   /**
    * @zh 所占列数
    * @en number of columns
+   * @defaultValue 1
    */
   span?: number;
 }