javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [description] labelWidth is invalid when no border (#19162)

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

* test: add test case
This commit is contained in:
btea
2025-01-04 14:10:26 +08:00
committed by GitHub
parent 9129516974
commit 45fa8d3b31
2 changed files with 53 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/components/descriptions/__tests__/descriptions.test.tsx
View File

@@ -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')
})
})

8
packages/components/descriptions/src/descriptions-cell.ts
View File

@@ -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