笔者在做项目使用el-description时发现,为什么设置的lableStyle属性要么不生效,要么直接报错。
第一段讲述了笔者是如何遇到问题的,对解决方法感兴趣的朋友可以直接跳到第二段哦~😊
1. 情景再现
笔者这里用elementUI官方文档的示例重现一下。如下图所示,当前没什么问题(这是直接复制的‘自定义样式’示例)
然后对el-descriptions标签设置labelStyle属性,就error了🙃
当然,我们可以看到左边的样式已经改变。但是右边的报错也是显而易见的。浏览器告诉我们lableStyle属性是无效的,浏览器期望以对象的格式,而当前是字符串。
自古以来就有句话是说“能跑就行”,但本着严谨+强迫症的态度,笔者想把这个error解决。
于是乎在结合了上图的报错信息后和官方文档的说明后,笔者就对代码进行了小修改:
然而并没有什么用,并且样式也没有生效。 发生肾么事了?我不到啊🤐
然后笔者又尝试 :labelStyle="{width: 200px}" 、 :labelStyle="width: 200px" ,这下直接连页面都不显示出来了。
2. 解决方法
问题是官方文档也没给 labelStyle 的示例呀。就在笔者百思不得其解、束手无策之时,我突然想到它不是有个好兄弟 contentStyle 吗?而且文档里正好有它的用法。
哦,源赖氏这样。笔者重新修改成这样::labelStyle="{'width': '200px'}" ,就没问题了。
涨姿势了😢
如果这篇文章有帮助到你,不妨给笔者一个大拇哥;如果你有建议或者想法,也恳请指正。阿里嘎多~