Element Plus 的 Descriptions 组件怎么设置 label 宽度?

ლ伊可 阅读 136

我在用 Element Plus 的 Descriptions 描述列表,发现 label 宽度太窄,内容被挤到下一行了。

试过加 label-width 属性,但好像没生效,是不是写法不对?

<el-descriptions :column="1" label-width="120px">
  <el-descriptions-item label="用户名">admin</el-descriptions-item>
</el-descriptions>
我来解答 赞 18 收藏
二维码
手机扫码查看
2 条解答
宇文爱军
啊这个坑我踩过!Element Plus的Descriptions组件设置label宽度确实有点小坑,不是直接在上加label-width就完事的。

关键是要在上也加label-width属性才行,而且两个地方的写法还不一样:



admin



我当初就是只在外层设置,折腾了半天发现没用。后来看源码才发现内层item的样式会覆盖外层设置。

另外如果你要全局设置所有label的宽度,可以用CSS这样写:

.el-descriptions__label {
width: 120px;
}


不过这种全局写法可能会影响其他地方的Descriptions组件,慎用。
点赞
2026-03-06 16:04
爱丹~
爱丹~ Lv1
啊这个坑我踩过,label-width要加在el-descriptions-item上,不是父组件。懒人方案:



admin



这样就行了,Element Plus文档写得不太明显,浪费我半小时才试出来
点赞 1
2026-03-05 06:08