diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx index 8d837f12cf..a782936e86 100644 --- a/packages/components/descriptions/__tests__/descriptions.test.tsx +++ b/packages/components/descriptions/__tests__/descriptions.test.tsx @@ -250,4 +250,50 @@ describe('Descriptions.vue', () => { wrapper.findAll('.el-descriptions__label')[1].attributes('style') ).toContain('width: 150px') }) + + test('should render labelWidth prop of DescriptionsItem with no border', () => { + const wrapper = mount(() => ( + + {Array.from({ length: 3 }).map(() => ( + + ))} + + )) + + expect( + wrapper.find('.el-descriptions__label').attributes('style') + ).toContain('width: 150px') + }) + + test('should render labelWidth prop of Descriptions with no border', () => { + const wrapper = mount(() => ( + + {Array.from({ length: 3 }).map(() => ( + + ))} + + )) + + expect( + wrapper.find('.el-descriptions__label').attributes('style') + ).toContain('width: 150px') + }) + + test('should render labelWidth prop of Descriptions and DescriptionsItem with higher priority with no border', () => { + const wrapper = mount(() => ( + + + {Array.from({ length: 2 }).map(() => ( + + ))} + + )) + + expect( + wrapper.findAll('.el-descriptions__label')[0].attributes('style') + ).toContain('width: 100px') + expect( + wrapper.findAll('.el-descriptions__label')[1].attributes('style') + ).toContain('width: 150px') + }) }) diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts index 0b80a61200..12e5d2243a 100644 --- a/packages/components/descriptions/src/descriptions-cell.ts +++ b/packages/components/descriptions/src/descriptions-cell.ts @@ -108,7 +108,12 @@ export default defineComponent({ ) default: { const label = renderLabel() - + const labelStyle: Record = {} + const width = addUnit(item.labelWidth || this.descriptions.labelWidth) + if (width) { + labelStyle.width = width + labelStyle.display = 'inline-block' + } return withDirectives( h( 'td', @@ -123,6 +128,7 @@ export default defineComponent({ ? h( 'span', { + style: labelStyle, class: [ns.e('label'), labelClassName], }, label