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 样式的一些心得笔记，希望有帮到你，如果我哪里写错了，也麻烦指出来一下哦。

ant design vue 的 description组件中 label 默认样式的更改相关推荐

ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
Ant Design Vue - 去除 input 组件边框和获取焦点时的边框蓝阴影效果
前言默认情况下,组件是有默认边框与获取焦点时存在的阴影效果的. 解决方案在该页面的底部加入以下覆盖样式. .ant-input:focus {/* 去除获取焦点时的样式 */border: non ...
Ant Design Vue LocaleProvider国际化组件zh_CN中文配置
举个栗子,我在项目中遇到了一个问题,table组件的分页器页数默认显示为英文, 查了一下,可以用<a-locale-provide>标签去实现,使用过程中发现这个标签已经废弃,于是总结出以 ...
Ant Design Vue list表格组件
文章目录 1.案例部分代码 2. 简述 3.案例代码 1.案例部分代码 <a-table:columns="columns":row-key="record =&g ...
ant design vue 清空upload组件图片缓存的方法
当关闭这个窗口后,再次打开,上传上传的图片清空在upload 这个组件外加一个key 赋随机值,便可清除缓存缓存代码如下: <a-modal v-model="visible&qu ...
Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部代码如下: 1 <a-select v-model="que ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...

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

方法一：使用插槽

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

ant design vue 的 description组件中 label 默认样式的更改相关推荐

最新文章

热门文章