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