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
}