mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
feat(components): [description-item] add labelWidth prop (#18673)
* feat(components): [description-item] add labelWidth prop * feat(docs): [description-item] add labelWidth prop in api * feat(components): [descriptions] add test code for * fix(components): [descriptions] more maintainable width compute * feat(docs): [descriptions] add version tips for label-width prop * feat(docs): [descriptions] update label-width support version * chore: code format * feat(components): [descriptions] add labelWidth to descriptions * feat(components): [descriptions] add test code for labelWidth * feat(components): [descriptions] add docs for new labelWidth props --------- Co-authored-by: warmthsea <2586244885@qq.com>
This commit is contained in:
Harry Li
GitHub
parent
9e763f77fa
commit
6a3dccaad8
@ -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
|
||||
|
||||
|
||||
@ -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(() => (
|
||||
<ElDescriptions border>
|
||||
{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', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions label-width="150px" border>
|
||||
{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', () => {
|
||||
const wrapper = mount(() => (
|
||||
<ElDescriptions label-width="100px" border>
|
||||
<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')
|
||||
})
|
||||
})
|
||||
|
||||
@ -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)
|
||||
*/
|
||||
|
||||
@ -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<typeof descriptionProps>
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user