0
点赞
收藏
分享

微信扫一扫

antd-design 中的 Descriptions组件修改label的默认样式——插槽的使用

拾光的Shelly 2022-03-11 阅读 91

最近我的很多同事都在用antd design,我这边还是倾向于用目前熟悉的 elementUi

同事那边遇到一个需求,需要改变antd design中的description组件中部分label的样式。
比如下方中红线标注的客户地址的样式。
在这里插入图片描述
我一开始以为这个是table表格写的。后来一问才知道是antd design中的description组件。

同事用下面的方法动态绑定class,发现并没有什么用……
在这里插入图片描述
antd designelementUI在很多方面都是类似的。我想到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样式,即可实现修改默认样式的效果。

完成!!!

举报

相关推荐

0 条评论