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