diff --git a/src/descriptions/_example-ts/layout.vue b/src/descriptions/_example-ts/layout.vue index 3bfa0b0529..e2ac954f60 100644 --- a/src/descriptions/_example-ts/layout.vue +++ b/src/descriptions/_example-ts/layout.vue @@ -10,8 +10,17 @@ + + 第一个 item 的 span: + + + {{ layout === 'vertical' ? '当 layout 为 vertical 时,span 设置将失效' : '' }} + {{ layout !== 'vertical' && firstItemSpan > 3 ? 'span 设置大于 column 时,span 将设置为 column' : '' }} + + + - TDesign + TDesign 139****0609 China Tencent Headquarters Shenzhen Penguin Island D1 4A Mail Center @@ -24,6 +33,9 @@ import { ref } from 'vue'; import { DescriptionsProps, RadioGroupProps } from 'tdesign-vue-next'; const layout = ref('horizontal'); const itemLayout = ref('horizontal'); +const firstItemSpan = ref(1); + const layoutOptions: RadioGroupProps['options'] = ['horizontal', 'vertical']; const itemLayoutOptions: RadioGroupProps['options'] = ['horizontal', 'vertical']; +const firstItemSpanOptions = [1, 2, 3]; diff --git a/src/descriptions/_example/layout.vue b/src/descriptions/_example/layout.vue index eb96783870..1eaaa7178f 100644 --- a/src/descriptions/_example/layout.vue +++ b/src/descriptions/_example/layout.vue @@ -10,8 +10,17 @@ + + 第一个 item 的 span: + + + {{ layout === 'vertical' ? '当 layout 为 vertical 时,span 设置将失效' : '' }} + {{ layout !== 'vertical' && firstItemSpan > 3 ? 'span 设置大于 column 时,span 将设置为 column' : '' }} + + + - TDesign + TDesign 139****0609 China Tencent Headquarters Shenzhen Penguin Island D1 4A Mail Center @@ -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]; diff --git a/src/descriptions/descriptions-row.tsx b/src/descriptions/descriptions-row.tsx index 0ee70e5f3d..dffa239f51 100644 --- 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 ( {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 ( @@ -78,8 +84,8 @@ export default defineComponent({ const hv = () => ( <> - {props.row.map((node) => label(node, 'vertical'))} - {props.row.map((node) => content(node, 'vertical'))} + {props.row.map((node) => label(node))} + {props.row.map((node) => content(node))} ); @@ -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 index bfca12d5a7..c0a1437701 100644 --- 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; }