最近我的很多同事都在用antd design
,我这边还是倾向于用目前熟悉的 elementUi
。
同事那边遇到一个需求,需要改变antd design
中的description
组件中部分label
的样式。
比如下方中红线标注的客户地址
的样式。
我一开始以为这个是table
表格写的。后来一问才知道是antd design
中的description
组件。
同事用下面的方法动态绑定class
,发现并没有什么用……
antd design
与elementUI
在很多方面都是类似的。我想到elementUi
中的table
表格,当默认的prop
对应的label
不满足要求时,会写一个template
标签,然后使用slot-scope="scope"
的方式,在标签里面写想要的效果。因此,我想到去官网找找是否有对应的插槽
.
发现官网上有个v-slot:label
的写法,对应的就是label
标签。因此上面的写法改为如下:
注意:给a-descriptions-item
绑定class
是无效的,无论是否是动态绑定都无效。
上图中的写法就是template v-slot:label
代表label
标签,在template
标签外面写的内容是label
后面的内容部分。给template
标签中的span
(也可以是其他标签)动态绑定class
样式,即可实现修改默认样式的效果。
完成!!!