diff --git a/packages/descriptions/__tests__/descriptions.spec.ts b/packages/descriptions/__tests__/descriptions.spec.ts index 6d3d8dd156..518a9a93f7 100644 --- a/packages/descriptions/__tests__/descriptions.spec.ts +++ b/packages/descriptions/__tests__/descriptions.spec.ts @@ -134,10 +134,12 @@ describe('Descriptions.vue', () => { 1 2 3 + 4 `) expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual('2') + expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual('2') }) test('re-rendered when slots is updated', async () => { diff --git a/packages/descriptions/src/index.vue b/packages/descriptions/src/index.vue index 18f30936b9..e3a0fe8607 100644 --- a/packages/descriptions/src/index.vue +++ b/packages/descriptions/src/index.vue @@ -90,8 +90,8 @@ export default defineComponent({ node.props.span = count } if (isLast) { - // set the max span, cause of the last td - node.props.span = props.column + // set the last span + node.props.span = span } return node } @@ -101,12 +101,19 @@ export default defineComponent({ const rows = [] let temp = [] let count = props.column + let totalSpan = 0 // all spans number of item children.forEach((node, index) => { - const span = node.props?.span || 1 + let span = node.props?.span || 1 + + if (index < children.length - 1) { + totalSpan += span > count ? count : span + } if (index === children.length - 1) { - temp.push(filledNode(node, span, count, true)) + // calculate the last item span + const lastSpan = props.column - totalSpan % props.column + temp.push(filledNode(node, lastSpan, count, true)) rows.push(temp) return }