feat(descriptions): vertical layout should reset span to 1

Tencent · Oct 16, 2024 · 63b0546 · 63b0546
1 parent aa94731
commit 63b0546
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/src/descriptions/_example-ts/layout.vue b/src/descriptions/_example-ts/layout.vue
@@ -10,8 +10,17 @@
       <t-radio-group v-model="itemLayout" :options="itemLayoutOptions"></t-radio-group>
     </t-row>
 
+    <t-row>
+      <span>第一个 item 的 span：</span>
+      <t-radio-group v-model="firstItemSpan" :disabled="layout === 'vertical'" :options="firstItemSpanOptions" />
+      <span style="color: #333; font-size: 12px">
+        {{ layout === 'vertical' ? '当 layout 为 vertical 时，span 设置将失效' : '' }}
+        {{ layout !== 'vertical' && firstItemSpan > 3 ? 'span 设置大于 column 时，span 将设置为 column' : '' }}
+      </span>
+    </t-row>
+
     <t-descriptions title="Shipping address" bordered :layout="layout" :item-layout="itemLayout" :column="3">
-      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Name" :span="firstItemSpan">TDesign</t-descriptions-item>
       <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
       <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
       <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
@@ -24,6 +33,9 @@ import { ref } from 'vue';
 import { DescriptionsProps, RadioGroupProps } from 'tdesign-vue-next';
 const layout = ref<DescriptionsProps['layout']>('horizontal');
 const itemLayout = ref<DescriptionsProps['itemLayout']>('horizontal');
+const firstItemSpan = ref<number>(1);
+
 const layoutOptions: RadioGroupProps['options'] = ['horizontal', 'vertical'];
 const itemLayoutOptions: RadioGroupProps['options'] = ['horizontal', 'vertical'];
+const firstItemSpanOptions = [1, 2, 3];
 </script>
diff --git a/src/descriptions/_example/layout.vue b/src/descriptions/_example/layout.vue
@@ -10,8 +10,17 @@
       <t-radio-group v-model="itemLayout" :options="itemLayoutOptions"></t-radio-group>
     </t-row>
 
+    <t-row>
+      <span>第一个 item 的 span：</span>
+      <t-radio-group v-model="firstItemSpan" :disabled="layout === 'vertical'" :options="firstItemSpanOptions" />
+      <span style="color: #333; font-size: 12px">
+        {{ layout === 'vertical' ? '当 layout 为 vertical 时，span 设置将失效' : '' }}
+        {{ layout !== 'vertical' && firstItemSpan > 3 ? 'span 设置大于 column 时，span 将设置为 column' : '' }}
+      </span>
+    </t-row>
+
     <t-descriptions title="Shipping address" bordered :layout="layout" :item-layout="itemLayout" :column="3">
-      <t-descriptions-item label="Name">TDesign</t-descriptions-item>
+      <t-descriptions-item label="Name" :span="firstItemSpan">TDesign</t-descriptions-item>
       <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
       <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
       <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
@@ -24,7 +33,9 @@ import { ref } from 'vue';
 
 const layout = ref('horizontal');
 const itemLayout = ref('horizontal');
+const firstItemSpan = ref(1);
 
 const layoutOptions = ['horizontal', 'vertical'];
 const itemLayoutOptions = ['horizontal', 'vertical'];
+const firstItemSpanOptions = [1, 2, 3, 4];
 </script>
diff --git a/src/descriptions/descriptions-row.tsx b/src/descriptions/descriptions-row.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import { LayoutEnum } from '../common';
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
@@ -17,8 +17,10 @@ export default defineComponent({
     const descriptionsProps = inject(descriptionsKey);
     const COMPONENT_NAME = usePrefixClass('descriptions');
     const { globalConfig } = useConfig('descriptions');
+    const layoutIsHorizontal = computed(() => descriptionsProps.layout === 'horizontal');
+    const itemLayoutIsHorizontal = computed(() => descriptionsProps.itemLayout === 'horizontal');
 
-    const label = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => {
+    const label = (node: TdDescriptionItem) => {
       const labelClass = [`${COMPONENT_NAME.value}__label`];
 
       let label = null;
@@ -30,8 +32,8 @@ export default defineComponent({
         label = renderVNodeTNode(node, 'label');
         span = node.props.span;
       }
-      const labelSpan = layout === 'horizontal' ? 1 : span;
-
+      // 当 layout 为 horizontal 时，span 设置将失效
+      const labelSpan = layoutIsHorizontal.value ? (itemLayoutIsHorizontal.value ? 1 : span) : 1;
       return (
         <td colspan={labelSpan} class={labelClass} {...{ style: descriptionsProps.labelStyle }}>
           {label}
@@ -40,7 +42,7 @@ export default defineComponent({
       );
     };
 
-    const content = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => {
+    const content = (node: TdDescriptionItem) => {
       const contentClass = [`${COMPONENT_NAME.value}__content`];
 
       let content = null;
@@ -52,7 +54,11 @@ export default defineComponent({
         content = renderVNodeTNode(node, 'content', 'default');
         span = node.props.span;
       }
-      const contentSpan = span > 1 && layout === 'horizontal' ? span * 2 - 1 : span;
+      const contentSpan = layoutIsHorizontal.value
+        ? span > 1 && itemLayoutIsHorizontal.value
+          ? span * 2 - 1
+          : span
+        : 1;
 
       return (
         <td colspan={contentSpan} class={contentClass} {...{ style: descriptionsProps.contentStyle }}>
@@ -78,8 +84,8 @@ export default defineComponent({
 
     const hv = () => (
       <>
-        <tr>{props.row.map((node) => label(node, 'vertical'))}</tr>
-        <tr>{props.row.map((node) => content(node, 'vertical'))}</tr>
+        <tr>{props.row.map((node) => label(node))}</tr>
+        <tr>{props.row.map((node) => content(node))}</tr>
       </>
     );
 
@@ -107,11 +113,11 @@ export default defineComponent({
 
     return () => (
       <>
-        {descriptionsProps.layout === 'horizontal'
-          ? descriptionsProps.itemLayout === 'horizontal'
+        {layoutIsHorizontal.value
+          ? itemLayoutIsHorizontal.value
             ? hh()
             : hv()
-          : descriptionsProps.itemLayout === 'horizontal'
+          : itemLayoutIsHorizontal.value
           ? vh()
           : vv()}
       </>

diff --git a/src/descriptions/descriptions.tsx b/src/descriptions/descriptions.tsx
@@ -85,9 +85,12 @@ export default defineComponent({
         let span = 1;
         if (itemTypeIsProps(itemsType.value, item)) {
           span = isNil(item.span) ? span : item.span;
+          // 当 span 大于 column 时，取 column
+          span = span > column ? column : span;
         } else {
           item.props = item.props || {};
           span = isNil(item.props?.span) ? span : item.props.span;
+          span = span > column ? column : span;
           item.props.span = span;
         }