From d9cdfa67db6c8990a904878dacb626c43784d60e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 17 Feb 2022 19:32:38 +0800
Subject: [PATCH] fix: descriptions warning, close #5250

---
 .../__snapshots__/index.test.js.snap          | 44 ++++++++++++-------
 components/descriptions/index.tsx             | 18 ++++----
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
index 8a82f0059..91473a64b 100644
--- a/components/descriptions/__tests__/__snapshots__/index.test.js.snap
+++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -7,7 +7,7 @@ exports[`Descriptions Descriptions support colon 1`] = `
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item" colspan="3">
+          <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label ant-descriptions-item-no-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
           </td>
         </tr>
@@ -24,7 +24,7 @@ exports[`Descriptions Descriptions support style 1`] = `
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item" colspan="3">
+          <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container">
               <!----><span class="ant-descriptions-item-content">Cloud Database</span>
             </div>
@@ -43,7 +43,7 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
     <table>
       <tbody>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item my-class" colspan="3">
+          <td class="ant-descriptions-item my-class" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
           </td>
         </tr>
@@ -93,11 +93,29 @@ exports[`Descriptions vertical layout 1`] = `
               <!---->
             </div>
           </th>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td class="ant-descriptions-item" colspan="1">
+            <div class="ant-descriptions-item-container">
+              <!----><span class="ant-descriptions-item-content">Cloud Database</span>
+            </div>
+          </td>
+        </tr>
+        <tr class="ant-descriptions-row">
           <th class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
               <!---->
             </div>
           </th>
+        </tr>
+        <tr class="ant-descriptions-row">
+          <td class="ant-descriptions-item" colspan="1">
+            <div class="ant-descriptions-item-container">
+              <!----><span class="ant-descriptions-item-content">Prepaid</span>
+            </div>
+          </td>
+        </tr>
+        <tr class="ant-descriptions-row">
           <th class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span>
               <!---->
@@ -105,16 +123,6 @@ exports[`Descriptions vertical layout 1`] = `
           </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item" colspan="1">
-            <div class="ant-descriptions-item-container">
-              <!----><span class="ant-descriptions-item-content">Cloud Database</span>
-            </div>
-          </td>
-          <td class="ant-descriptions-item" colspan="1">
-            <div class="ant-descriptions-item-container">
-              <!----><span class="ant-descriptions-item-content">Prepaid</span>
-            </div>
-          </td>
           <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container">
               <!----><span class="ant-descriptions-item-content">18:00:00</span>
@@ -122,14 +130,14 @@ exports[`Descriptions vertical layout 1`] = `
           </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <th class="ant-descriptions-item" colspan="3">
+          <th class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span>
               <!---->
             </div>
           </th>
         </tr>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item" colspan="3">
+          <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container">
               <!----><span class="ant-descriptions-item-content">$80.00</span>
             </div>
@@ -151,15 +159,19 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
           <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></div>
           </td>
+        </tr>
+        <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></div>
           </td>
+        </tr>
+        <tr class="ant-descriptions-row">
           <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</span><span class="ant-descriptions-item-content">18:00:00</span></div>
           </td>
         </tr>
         <tr class="ant-descriptions-row">
-          <td class="ant-descriptions-item" colspan="3">
+          <td class="ant-descriptions-item" colspan="1">
             <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Amount</span><span class="ant-descriptions-item-content">$80.00</span></div>
           </td>
         </tr>
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index c1abdda41..2234bd7e3 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -9,7 +9,15 @@ import type {
   CSSProperties,
   InjectionKey,
 } from 'vue';
-import { ref, defineComponent, onMounted, onBeforeUnmount, provide, toRef, computed } from 'vue';
+import {
+  onBeforeMount,
+  ref,
+  defineComponent,
+  onBeforeUnmount,
+  provide,
+  toRef,
+  computed,
+} from 'vue';
 import warning from '../_util/warning';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
@@ -78,7 +86,6 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
     clone = cloneElement(node, {
       span: rowRestCol,
     });
-
     warning(
       span === undefined,
       'Descriptions',
@@ -95,7 +102,6 @@ function getRows(children: VNode[], column: number) {
 
   let tmpRow: VNode[] = [];
   let rowRestCol = column;
-
   childNodes.forEach((node, index) => {
     const span: number | undefined = node.props?.span;
     const mergedSpan = span || 1;
@@ -155,17 +161,13 @@ const Descriptions = defineComponent({
   Item: DescriptionsItem,
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('descriptions', props);
-
     let token: number;
-
     const screens = ref<ScreenMap>({});
-
-    onMounted(() => {
+    onBeforeMount(() => {
       token = ResponsiveObserve.subscribe(screen => {
         if (typeof props.column !== 'object') {
           return;
         }
-
         screens.value = screen;
       });
     });