fix: descriptions warning, close #5250

Author: tangjinzhou

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,43 +93,51 @@ exports[`Descriptions vertical layout 1`] = `
               <!---->
             </div>
           </th>
-          <th class="ant-descriptions-item" colspan="1">
-            <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">Billing</span>
-              <!---->
-            </div>
-          </th>
-          <th class="ant-descriptions-item" colspan="1">
-            <div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label">time</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">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>
+              <!---->
+            </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">18:00:00</span>
             </div>
           </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>

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;
       });
     });