您的当前位置:首页>全部文章>文章详情

【Vue】Andt Pro Vue的使用(六) —— 描述列表a-descriptions设置label和content的样式

CrazyPanda发表于:2024-05-09 14:24:55浏览:392次TAG:

1、 a-descriptions设置label和content的样式

在react组件中,可以直接设置labelStyle和contentStyle,来设置label和content的样式,

但是在vue2的组件中,官方并没有给出响应的设置方法https://1x.antdv.com/components/descriptions-cn/

如下是我的订单详情页面

无标题.png

label的宽度是自适应的,想要设置为固定的宽度,网上找了好多方法,都不生效

直到遇到下面的方法

https://blog.csdn.net/fifty_one/article/details/120219194

要使用/deep/,

/deep/.ant-descriptions-row > th {
    padding-bottom: 8px !important; width: 20% !important;
}

果然,如此设置后缺失生效了

无标题.png

这个deep是干什么的,在CSS样式汇总有什么用?

2、deep

含义:

/deep/ 深度选择器

用法

在vue中,我们为了避免父组件的样式影响到子组件的样式,会在style中加<style scoped>,这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候,

就不会影响到子组件的样式。

我们在加了 scoped 之后样式会自动添加一个hash值。比如下面所示:

.title[data-v-211e4c4a] {
    color: #ff0;
}

当你想在父组件修改子组件的样式,就需要使用/deep/。比如下面所示:

<style scoped>
/deep/ .title{
    color: #ff0;
}
</style>

>>>/deep/ 以及 ::v-deep三种的效果均是在父组件改变子组件的样式。      

一些预处理器(例如Sass)可能无法正确解析>>>。在这些情况下,可以改用/deep/或::v-deep组合器,两者都是它的别名,并且和>>>工作原理完全相同。

猜你喜欢

【Vue】Andt Pro Vue的使用(六) —— 描述列表a-descriptions设置label和content的样式
1、&nbsp;a-descriptions设置label和content的样式在react组件中,可以直接设置labelStyle和contentStyle,来设置label和content的样式,但是在vue2的组件中,官方并没有给出响应的设置方法如下是我的订单详情页面label的宽度是自适应的,想要设置为固定的宽度,网上找了好多方法,都不生效直到遇到下面的方法https://blog.csdn.net/fifty_one/article/details/120219194 要使用/deep,
发表于:2024-05-09 浏览:393 TAG:
【Vue】Vue 单文件组件 (SFC) 规范
简介.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 &lt;template&gt;、&lt;script&gt; 和 &lt;style&gt;,还允许添加可选的自定义块:
发表于:2024-03-29 浏览:283 TAG:
【Vue】uniapp(vue3)+node.js+websocket(实现实时通信效果)
文章目录概要整体架构流程技术名词解释技术细节小结概要uniapp基于vue3,小程序的聊天功能项目是基于node.js服务器搭建的简易双向通信网页,实现了实时更新在线人数以及用户间即时通讯的功能。整体架构流程后台接口代码1、首先我们可以通过Express 应用程序生成器快速搭建一个后台框架。(这快可以参考官网)2、服务端/** &nbsp;*&nbsp;WebSocket模块 &nbsp;*/ &nbsp; const&nbsp;{&nbsp;WebSocketServer&nbsp;}&amp;nbs
发表于:2023-12-05 浏览:304 TAG:
【Vue】Vue中字符串数组和对象常用方法介绍
在Vue中,数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统,可以自动跟踪数组和对象的变化,并响应式地更新DOM。在Vue中,您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串 数组 以及对象的常用操作方法。一.数组方法1.增删改: unshift、push、splice、shift、pop、splice、slice&nbsp;1.1.unshift:在数组的头部添加内容//&nbsp;数组.unshift(&quot;添加的值&quot;)
发表于:2024-05-08 浏览:290 TAG:
【Vue】Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)
文章目录📋前言🎯关于 Print.js🧩PDF 打印🧩网页(HTML)打印🧩图像打印🧩JSON 打印🧩下载并安装使用🧩相关配置🎯 Vue3 中使用 Print.js 实战🎯Vue3 + Nodejs + Print.js 模拟打印实战案例🧩启动 Nodejs 服务🧩启动 Vue 项目📝最后📋前言今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的
发表于:2023-12-10 浏览:335 TAG:
【VUE】vue3组件间的通信,父组件调用子组件方法
文章目录一、父组件数据传递N个层级的子组件二、使用v-model指令实现父子组件的双向绑定三、父组件props向子组件传值四、子组件emit向父组件传值五、通过expose和ref来实现父组件调用子组件的方法vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue父组件名称 app.vue子组件名称 v-modelSetup.vue子组件 propsSetup.vue父组件 app.vuevue3 ev
发表于:2024-03-10 浏览:569 TAG:
【Vue】vue中哪些属性可以写异步方法
vue 中可以利用 methods 和 computed 属性定义异步方法。methods: 1. 定义异步方法,使用 async/await 处理异步请求。2. 返回一个 promise 对象。computed: 1. 定义异步计算属性,使用 async/await 处理异步请求。2. 返回派生数据的 promise 对象。Vue 中支持异步方法的属性在 Vue 中,可以使用 methods 和 computed 属性来定义异步方法。methodsmethods 属性中定义的方法可以包含异步操
发表于:2024-05-16 浏览:214 TAG:
【Vue】Antd Pro Vue的使用(三)—— table列表的使用
用了几天ant design pro vue,发现vue2真的不是很好用,各种写法好麻烦。还有研究组件时,一定要看低版本的组件,高版本都是vue3的,并不适用。vue2版本组件位置:https://1x.antdv.com/components/alert-cn/ 作为后台管理端,用到最多的就是table列表,官网给的有预览但是自己上手的时候有事另外一回事了,首先就是接口请求的数据结果,官网并没有介绍接口应该返回什么样的数据结构,导致接口成功请求到数据,但table就是无法正常显示,最终参考de
发表于:2024-04-26 浏览:388 TAG:
【Vue】Antd Pro Vue的使用(十一) —— 富文本编辑器wangeditor的使用(避坑)
我承认,antd pro vue2是免费的,已经是老版本了,有多老呢,自带的wangeditor竟然是V3.1.1版本的,两年前无用wangeditor的时候已经是V5版本了,V3简直是上古的东西,官网都没有找到V3版本的资料。。。。,好在最后还是找到了一份V3版本的资料,要不然又要花时间去用新版本了。wangeditor V3参考资料:https://www.kancloud.cn/wangfupeng/wangeditor3/335782下面是框架组件的配置:问题出现的原因:做商品详情的时候
发表于:2024-05-10 浏览:281 TAG:
【Vue】Vue中使用vue-router的妙用详解
vue是当前最热门的前端框架之一,它不仅简洁易用,而且具有强大的扩展性,其中一个值得关注的插件就是vue-router。vue-router是vue官方路由插件,它可以更好地控制vue应用中的路由导航,使路由与组件之间的关系更加清晰,提升了用户的交互体验。本文将详细解读vue-router的使用方法及妙用。一、安装和使用在使用vue-router之前,需要先安装它。可以使用npm包管理器来安装vue-router插件。安装命令如下:npm&nbsp;install&nbsp;vue-router
发表于:2024-04-29 浏览:302 TAG: