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

矫情吗；* 2022-10-19 04:09 281阅读 0赞

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

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

同事用下面的方法动态绑定`class`，发现并没有什么用……  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
`antd design`与`elementUI`在很多方面都是类似的。我想到`elementUi`中的`table`表格，当默认的`prop`对应的`label`不满足要求时，会写一个`template`标签，然后使用`slot-scope="scope"`的方式，在标签里面写想要的效果。因此，我想到去官网找找是否有对应的`插槽`.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
发现官网上有个`v-slot:label`的写法，对应的就是`label`标签。因此上面的写法改为如下：

注意：**给`a-descriptions-item`绑定`class`是无效的，无论是否是动态绑定都无效。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
上图中的写法就是`template v-slot:label`代表`label`标签，在`template`标签外面写的内容是`label`后面的内容部分。给`template`标签中的`span`(也可以是其他标签)动态绑定`class`样式，即可实现修改默认样式的效果。

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/216f0d286b7d468d8f1639cdce60d842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/a832d86cfcee4684b734d8ad6d7c990f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/01e8114943104fa4aeb4c0122e8b68e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/95ec66e899c74b2189bf542fac0ab335.png