diff --git a/src/descriptions/__tests__/index.test.jsx b/src/descriptions/__tests__/index.test.jsx index 134f6e71fa..8cf93e63b8 100644 --- a/src/descriptions/__tests__/index.test.jsx +++ b/src/descriptions/__tests__/index.test.jsx @@ -1,6 +1,5 @@ import { it, expect } from 'vitest'; import { mount } from '@vue/test-utils'; -import { nextTick } from 'vue'; import { getDescriptionsMount } from './mount'; import Descriptions, { DescriptionsItem } from '@/src/descriptions/index.ts'; import CustomComp from './custom-comp.vue'; @@ -94,6 +93,31 @@ describe('Descriptions', () => { expect(thirdTrTd.element.getAttribute('colspan')).toBe('1'); }); + it(':layout:vertical,title slot', () => { + const labelSlot = 'Label Slot'; + const wrapper = mount({ + render() { + return ( + + labelSlot }}>TDesign + 139****0609 + China Tencent Headquarters + Shenzhen Penguin Island D1 4A Mail Center + + ); + }, + }); + + const tbody = wrapper.find('tbody'); + // 检查 tbody 下面是否只有 4 个 tr 元素 + expect(tbody.findAll('tr')).toHaveLength(4); + //主要关注第一个 tr + const firstTr = tbody.findAll('tr')[0]; + // 检查第 1 个 tr 元素中是否只有 2 个 td 元素 + expect(firstTr.findAll('td')).toHaveLength(2); + expect(firstTr.findAll('td')[0].text()).toBe(labelSlot); + }); + it(':layout:vertical (should not be affected by span)', () => { const wrapper = getDescriptionsMount({ props: { layout: layout.V }, firstItemProps: { span: 2 } }); const tbody = wrapper.find('tbody'); diff --git a/src/descriptions/descriptions-row.tsx b/src/descriptions/descriptions-row.tsx index cef7e0936a..6f0445036a 100644 --- a/src/descriptions/descriptions-row.tsx +++ b/src/descriptions/descriptions-row.tsx @@ -3,6 +3,7 @@ import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { descriptionsKey } from './const'; import { ItemsType, TdDescriptionItem } from './interface'; import { renderVNodeTNode, itemTypeIsProps } from './utils'; +import type { TdDescriptionItemProps } from './type'; export default defineComponent({ name: 'TDescriptionsRow', @@ -20,14 +21,14 @@ export default defineComponent({ const label = (node: TdDescriptionItem) => { const labelClass = [`${COMPONENT_NAME.value}__label`]; - let label = null; - let span = null; + let label: TdDescriptionItemProps['label'] = null; + let span: TdDescriptionItemProps['span'] = null; if (itemTypeIsProps(props.itemType, node)) { label = node.label; span = node.span; } else { label = renderVNodeTNode(node, 'label'); - span = node.props.span; + span = node.props?.span; } // 当 layout 为 horizontal 时,span 设置将失效 const labelSpan = layoutIsHorizontal.value ? (itemLayoutIsHorizontal.value ? 1 : span) : 1; @@ -42,14 +43,14 @@ export default defineComponent({ const content = (node: TdDescriptionItem) => { const contentClass = [`${COMPONENT_NAME.value}__content`]; - let content = null; - let span = null; + let content: TdDescriptionItemProps['content'] = null; + let span: TdDescriptionItemProps['span'] = null; if (itemTypeIsProps(props.itemType, node)) { content = node.content; span = node.span; } else { content = renderVNodeTNode(node, 'content', 'default'); - span = node.props.span; + span = node.props?.span; } const contentSpan = layoutIsHorizontal.value ? span > 1 && itemLayoutIsHorizontal.value diff --git a/src/descriptions/descriptions.tsx b/src/descriptions/descriptions.tsx index c0a1437701..15837aa28d 100644 --- a/src/descriptions/descriptions.tsx +++ b/src/descriptions/descriptions.tsx @@ -84,12 +84,12 @@ export default defineComponent({ items.forEach((item, index) => { let span = 1; if (itemTypeIsProps(itemsType.value, item)) { - span = isNil(item.span) ? span : item.span; + 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 = isNil(item.props?.span) ? span : item.props?.span; span = span > column ? column : span; item.props.span = span; }