ant design vue 的 description组件中 label 默认样式的更改

这两天做项目，需要实现一个如下图的效果

于是我就去 ant design vue 里面找，发现 description 组件符合这个效果
但是写完之后我发现，这个组件的 label 并不能修改样式啊，永远都是靠左显示

我想让它居中显示，该怎么处理呢？我这里给大家提供两种解决方法：

方法一：使用插槽

这一点，官方文档种其实说的很隐晦，不细看还发现不了，而且也没有示例，我也是在同事的帮助下，试了几遍才找到正确写法。

附上代码：

<template v-slot:label>
  <p style="width: 100%; margin: 0; text-align: center">{{item.name}}</p>
</template>

其中的样式，你可以根据你的需要自行更改。

方法二：自定义class修改样式

附上代码：

<style>
.labelCenter .ant-descriptions-item-label{
  text-align: center;
}
</style>

这么做，也可以实现你想要的效果。

---

以上就是关于我在用 description 时，修改 label 样式的一些心得笔记，希望有帮到你，如果我哪里写错了，也麻烦指出来一下哦。😊