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

最新推荐文章于 2023-11-02 19:33:30 发布
VIP文章 最新推荐文章于 2023-11-02 19:33:30 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 前端 html 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54866636/article/details/123344081
版权

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

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

同事用下面的方法动态绑定class，发现并没有什么用……
在这里插入图片描述
antd design与elementUI在很多方面都是类似的。我想到elementUi中的table表格，当默认的prop<

最低0.47元/天 解锁文章
良月生秋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
a-descriptions-item描述列表点击按钮显示相应内容
sinat_33940108的博客
01-08 7872
实现功能：点击查询按钮，显示相应数据，部分数据只读，部分数据可修改。 实现思路：首先通过点击按钮事件从接口获取内容，然后通过{{}}显示在界面上。 查询按钮触发事件代码 searchQuery(){ var that=this getAction(this.url.list,this.queryParam).then(res=>{ if(res.success){ if(res.result==null){
el-descriptions的入门学习
qq_40765784的博客
06-17 2万+
el-descriptions入门学习
ant-design-vue 描述列表descriptions修改label与content样式
fifty_one的博客
09-10 4432
a-descpritions-item上绑定class不生效，使用/deep /deep/.ant-descriptions-row > th { padding-bottom: 8px !important; width: 20% !important; } /deep/.ant-descriptions-row > td { padding-bottom: 8px !important; width: 30% !important; } ...
vue+element:el-descriptions组件，数据绑定、内容样式和标签样式自定义
热门推荐
baidu_39557593的博客
04-08 5万+
1.绑定接口数据——默认样式展示（未自定义宽度）： 2.绑定接口数据——自定义样式展示： 3.使用的语法 labelStyle="width: 150px" contentStyle="width: 250px" 4.Vue代码展示： <el-descriptions class="margin-top" :column="3" style="width: 1250px" border> <el-descriptions-item labelStyle="w
Ant Design of Vue 描述列表 Descriptions a-descriptions-item 文本超出的问题
花满天下的博客
07-13 1万+
项目使用Ant Design of Vue 框架 有显示订单信息的功能，使用了Ant 的Descriptions 出现了以下问题 文档也没有给出解决方案 //修改前代码 <a-descriptions title="接口信息"> <a-descriptions-item label="返回信息" :span="3">{{mdl.body}}</a-descriptions-item> <a-descriptions-item l
vue2+ant-design-vue a-descriptions 详情组件二次封装（vue2项目）
最新发布
wocwin的博客
11-02 1313
vue2+ant-design-vue a-descriptions 详情组件二次封装（vue2项目）
ant-design的描述列表description组件中给label添加自定义样式(必填样式)
weixin_55846296的博客
09-15 6257
修改前: <a-descriptions-item label="案件名称"> {{ this.mdl.caseName }} </a-descriptions-item> 对应效果: 给label添加自定义样式, 修改后: <a-descriptions-item > <template v-slot:label> <span>案件名称<span style="color:'red', paddingLeft:
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
Ant Design Mobile RNAnt ...演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --saveoryarn add @sishuguojixuefu/antd-mobile-rn链接字体图标react-native link @ant-design/ico
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
ant design vue 的 description组件中 label 默认样式的更改.pdf
12-16
ant design vue 的 description组件中 label 默认样式的更改
antd-visual-editor:ant-design 组件库实时可视化编辑器，实时生成 react 代码
05-24
求 pr特性可视化编辑，同时实时生成结果代码，还可以单独预览丰富的数据编辑能力，可以编辑组件的二维属性组件可嵌套自适应布局除了 antd 的组件，还有一些原生 html 元素可使用原理解析1.如何实现实时编辑第一步，...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
antd-mobile-plus:基于antd-mobile @ 2的业务组件
03-25
这是一个使用antd-mobile @ 3中的规范，从新规划的基础antd-mobile @ 2组件的基础上开发的业务组件。 其中包含了一些约定和规范，任何参加此项目维护的朋友，都必须保持一下约定，如果你也需要基于antd-mobile @ 2...
vue-antd-admin：:ant:Ant Design Pro与Vue的实施
02-06
简体中文|Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选：预览地址： : 使用文档： : 常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html国内知名： ://gitee....
【Element UI】Descriptions 组件 边框属性 border 为 false 时，Descriptions Item Slots 无法使用 label 插槽
weixin_40484876的博客
11-16 4667
版本：Element UI 2.15.6
AntD 的 Descriptions 组件实现“ 右对齐效果 ”
张云飞Vir的专栏
06-09 6201
1. 背景 Descriptions 是 AntD 组件，默认的样式 label 是居左对齐的，而我想要 右对齐的效果。比如这样： image.png 关键是样式要怎么调整呢？ 2.知识 先简单介绍下 Descriptions 组件。 Descriptions 组件是描述列表。用于成组展示多个只读字段，常见于详情页的信息展示。 比如展示用户信息： image.png ...
055_Descriptions描述列表
aihiao的专栏
03-05 6911
1. Descriptions描述列表 1.1. 列表形式展示多个字段。 1.2. Descriptions Attributes 参数 说明 类型 可选值 默认值 border 是否带有边框 boolean 无 false column 一行Descript
antd-design-vue中修改form-item的label的字体大小
05-27
你可以通过为 `Form.Item` 中的 `label` 属性设置一个样式来修改标签的字体大小。例如： ```html <a-form> <a-form-item label="Username" label-col="{ span: 6 }" wrapper-col="{ span: 14 }"> <a-input /> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值