diff --git a/docs/en-US/component/descriptions.md b/docs/en-US/component/descriptions.md
index 3dca6070a1..30a4307b43 100644
--- a/docs/en-US/component/descriptions.md
+++ b/docs/en-US/component/descriptions.md
@@ -51,14 +51,15 @@ descriptions/customized-style
### Descriptions Attributes
-| Name | Description | Type | Default |
-| --------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
-| border | with or without border | ^[boolean] | false |
-| column | numbers of `Descriptions Item` in one line | ^[number] | 3 |
-| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal |
-| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
-| title | title text, display on the top left | ^[string] | '' |
-| extra | extra text, display on the top right | ^[string] | '' |
+| Name | Description | Type | Default |
+| -------------------- | ------------------------------------------ | ---------------------------------------------- | ---------- |
+| border | with or without border | ^[boolean] | false |
+| column | numbers of `Descriptions Item` in one line | ^[number] | 3 |
+| direction | direction of list | ^[enum]`'vertical' \| 'horizontal'` | horizontal |
+| size | size of list | ^[enum]`'' \| 'large' \| 'default' \| 'small'` | — |
+| title | title text, display on the top left | ^[string] | '' |
+| extra | extra text, display on the top right | ^[string] | '' |
+| label-width ^(2.8.8) | label width of every column | ^[string] / ^[number] | '' |
### Descriptions Slots
@@ -72,17 +73,18 @@ descriptions/customized-style
### DescriptionsItem Attributes
-| Name | Description | Type | Default |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
-| label | label text | ^[string] | '' |
-| span | colspan of column | ^[number] | 1 |
-| rowspan ^(2.8.1) | the number of rows a cell should span | ^[number] | 1 |
-| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | ^[string] / ^[number] | '' |
-| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number] | '' |
-| align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left |
-| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | ^[enum]`'left' \| 'center' \| 'right'` | '' |
-| class-name | column content custom class name | ^[string] | '' |
-| label-class-name | column label custom class name | ^[string] | '' |
+| Name | Description | Type | Default |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
+| label | label text | ^[string] | '' |
+| span | colspan of column | ^[number] | 1 |
+| rowspan ^(2.8.1) | the number of rows a cell should span | ^[number] | 1 |
+| width | column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content) | ^[string] / ^[number] | '' |
+| min-width | column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content) | ^[string] / ^[number] | '' |
+| label-width ^(2.8.8) | column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions` | ^[string] / ^[number] | '' |
+| align | column content alignment (If no `border`, effective for both label and content) | ^[enum]`'left' \| 'center' \| 'right'` | left |
+| label-align | column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute) | ^[enum]`'left' \| 'center' \| 'right'` | '' |
+| class-name | column content custom class name | ^[string] | '' |
+| label-class-name | column label custom class name | ^[string] | '' |
### DescriptionsItem Slots
diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx
index 34b233b95a..8d837f12cf 100644
--- a/packages/components/descriptions/__tests__/descriptions.test.tsx
+++ b/packages/components/descriptions/__tests__/descriptions.test.tsx
@@ -204,4 +204,50 @@ describe('Descriptions.vue', () => {
await nextTick()
expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
})
+
+ test('should render labelWidth prop of DescriptionsItem', () => {
+ 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', () => {
+ 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', () => {
+ 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/description-item.ts b/packages/components/descriptions/src/description-item.ts
index 32db51e38a..66e5e85020 100644
--- a/packages/components/descriptions/src/description-item.ts
+++ b/packages/components/descriptions/src/description-item.ts
@@ -39,6 +39,13 @@ export const descriptionItemProps = buildProps({
type: [String, Number],
default: '',
},
+ /**
+ * @description column label width, if not set, it will be the same as the width of the column. Higher priority than the `label-width` of `Descriptions`
+ */
+ labelWidth: {
+ type: [String, Number],
+ default: '',
+ },
/**
* @description column content alignment (If no `border`, effective for both label and content)
*/
diff --git a/packages/components/descriptions/src/description.ts b/packages/components/descriptions/src/description.ts
index 468a1e2dd3..318dfdd06a 100644
--- a/packages/components/descriptions/src/description.ts
+++ b/packages/components/descriptions/src/description.ts
@@ -42,6 +42,13 @@ export const descriptionProps = buildProps({
type: String,
default: '',
},
+ /**
+ * @description width of every label column
+ */
+ labelWidth: {
+ type: [String, Number],
+ default: '',
+ },
} as const)
export type DescriptionProps = ExtractPropTypes
diff --git a/packages/components/descriptions/src/descriptions-cell.ts b/packages/components/descriptions/src/descriptions-cell.ts
index c1ddf66805..0b80a61200 100644
--- a/packages/components/descriptions/src/descriptions-cell.ts
+++ b/packages/components/descriptions/src/descriptions-cell.ts
@@ -52,8 +52,13 @@ export default defineComponent({
const labelAlign = item.labelAlign ? `is-${item.labelAlign}` : align
const className = item.className
const labelClassName = item.labelClassName
+ const width =
+ this.type === 'label'
+ ? item.labelWidth || this.descriptions.labelWidth || item.width
+ : item.width
+
const style = {
- width: addUnit(item.width),
+ width: addUnit(width),
minWidth: addUnit(item.minWidth),
}
const ns = useNamespace('descriptions')
diff --git a/packages/components/descriptions/src/descriptions.type.ts b/packages/components/descriptions/src/descriptions.type.ts
index bc8c56782a..32991fe50f 100644
--- a/packages/components/descriptions/src/descriptions.type.ts
+++ b/packages/components/descriptions/src/descriptions.type.ts
@@ -7,6 +7,7 @@ export interface IDescriptionsInject {
size: ComponentSize
title: string
extra: string
+ labelWidth: string | number
}
export interface IDescriptionsItemInject {
@@ -15,6 +16,7 @@ export interface IDescriptionsItemInject {
rowspan: number
width: string | number
minWidth: string | number
+ labelWidth: string | number
align: string
labelAlign: string
className: string