From 45fa8d3b31cc13f6f1ee8652dcd236315527a41a Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 4 Jan 2025 14:10:26 +0800
Subject: [PATCH] fix(components): [description] `labelWidth` is invalid when
 no border (#19162)

* fix(components): [description] `labelWidth` is invalid when no border

* test: add test case
---
 .../__tests__/descriptions.test.tsx           | 46 +++++++++++++++++++
 .../descriptions/src/descriptions-cell.ts     |  8 +++-
 2 files changed, 53 insertions(+), 1 deletion(-)

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(() => (
+      <ElDescriptions>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem label="测试标签" labelWidth="150px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.find('.el-descriptions__label').attributes('style')
+    ).toContain('width: 150px')
+  })
+
+  test('should render labelWidth prop of Descriptions with no border', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions label-width="150px">
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem label="测试标签" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    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(() => (
+      <ElDescriptions label-width="100px">
+        <ElDescriptionsItem label="测试标签" />
+        {Array.from({ length: 2 }).map(() => (
+          <ElDescriptionsItem label="测试标签" label-width="150px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    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<string, any> = {}
+        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