修改elementui默认样式，比如折叠版

最新推荐文章于 2024-07-31 14:10:48 发布

An ape

最新推荐文章于 2024-07-31 14:10:48 发布

阅读量608

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wsxDream/article/details/115129729

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS选择器来直接强制更改父元素内的子组件样式。通过添加特定的父级类名`.el-collapse-item__Bos`，并利用>>>深度选择符，设置`.el-collapse-item__Bos>>>.el-collapse-item__header`的字体大小为0.3rem，同时增加20px的左侧外边距，以此实现样式的精确调整。

摘要由CSDN通过智能技术生成

话不多说直接上代码
先给父级加类

 <el-collapse  @change="handleChange" style="width:100%;font-size:45px" class="el-collapse-item__Bos">
 </el-collapse>

然后使用父级类名加>>> 深入符号直接强制更改

.el-collapse-item__Bos >>>.el-collapse-item__header{
  font-size: 0.3rem !important;
  margin-left: 20px !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

An ape

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

elementUI el-collapse 自定义折叠面板icon 和样式或文字展开收起

m0_38109616的博客

10-28

5247

【代码】elementUI el-collapse 自定义折叠面板icon 和样式或文字展开收起。

项目中如何修改element-ui的默认样式

七小天的博客

06-11

799

（去除scoped,样式穿透 >>> , less/sass : /deep/） 1.查找要修改元素的类名class F12打开网页元素审查，根据元素高亮提示找到要修改的元素（这里面我们以折叠面板为例为例）：左上是我们选中的元素（高亮显示）；然后逐级展开找到了他的类名“el-collapse-item__header”，双击之后在右边会显示出该类所包含的属性以及属性的值，所以我们只要写出想要更改的属性，再赋予我们想要的值就可以。这里面我们改一下背景颜色 background-Colo

2 条评论您还未登录，请先登录后发表或查看评论

el-collapse-item title 自定义样式

最新发布

qq_33240556的博客

07-31

988

在 Element UI 中，是一个可折叠面板组件，它通常用于构建手风琴风格的折叠面板。如果你想要自定义的标题（title）样式，可以通过使用 scoped slots 或者直接修改类名来实现。

折叠面板背景颜色边框色去除/ 更改

qq_40806920的博客

05-06

3640

.ftaAnalysis .el-collapse-item__header, .ftaAnalysis .el-collapse-item__wrap { background-color: transparent; color: #fff; } .ftaAnalysis .el-collapse, .ftaAnalysis .el-collapse-item__wrap { border: none; }

Element Collapse 折叠面板的使用方法

12-28

本文来源于Element官方文档： http://element-cn.eleme.io/#/zh-CN/component/collapse 基础用法普通折叠面板与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</

vue3如何去除element-plus组件collapse手风琴效果的边框线折叠面板下边框和修改标题样式颜色字体大小

weixin_66071584的博客

05-30

653

vue3如何去除element-plus组件collapse手风琴效果的边框线折叠面板下边框和修改标题样式颜色字体大小 设置透明就好了，有用的话点个赞谢谢。

ElementUI 修改默认样式

虞公子的博客

06-11

177

（一）内嵌法修改样式通过:style修改，用于局部组件块： <el-button :style="selfstyle">默认按钮</el-button> <script> export default { data() { return { selfstyle: { color: "white", marginTop: "10px", width: "100px", backgroundColor: "cade

一看就会之ElementUI修改默认样式

Superman_peng的博客

07-18

732

（一）内嵌法通过:style修改，用于局部组件块： <el-button :style="selfstyle">默认按钮</el-button> <script> export default { data() { return { selfstyle: { color: "white", marginTop: "10px", width: "100px", backgroundColor: "cadetblu

云E办Springboot+vue——前端项目完整版（含源码）

08-10

5万+

本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项

java入职学习六之前端UI（element-ui,ant-design-vue）

Yzq12312的博客

12-12

836

一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。其设计原则为：一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。效率

element ui 离线压缩版 js css 含图标

03-15

页面内引用element ui的js 及css离线版便于不想通过webpack 打包和前后端分离使用

vue-cli.zip

04-14

Element UI 的 NavMenu 组件允许通过属性来定制菜单的行为和样式，例如你可以设置菜单是否为垂直布局、是否显示折叠箭头、默认展开项等。在这个项目中，"图标路由名称默认选项高度可自定义"表明开发者可能对 Nav...

LayUI中的内置模块之常用元素操作 - layui.element

daimeijin的博客

08-14

3359

前言最近在准备找工作的事项，但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE，但是VUE还是存在一定的学习成本，所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手，后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章，作为学习记录使用。常用元素操作页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为

Element UI（一）

紫幻_purple的博客

09-14

1772

目录一、指南设计原则导航选择合适的导航侧栏导航顶部导航二、开发指南安装 npm 安装 CDN Hello world 快速上手 ¶使用 vue-cli@3 ¶使用 Starter Kit ¶引入 Element ¶全局配置 ¶开始使用 ¶使用 Nuxt.js 自定义主题仅替换主题色在项目中改变 SCSS 变量命令行主题工具内置过...

如何修改element的默认样式

zhuaaaa3944210的博客

10-31

452

前端项目总结一

el-collapse用法

weixin_45944877的博客

08-04

3485

去除el-collapse折叠面板的默认背景，设置折叠板的箭头放置在右边，折叠面板默认全部展开

el-form-item 字体大小和样式内容修改

weixin_60655791的博客

05-16

1万+

<el-form-item> <span slot="label"> <span class="formStar">[填]</span> <span class="formLabel">基本信息</span> </span> </el-form-item> <style lang="scss".

element折叠面板(默认展开)的使用及样式修改

学习记录

11-19

1万+

效果图： HTML部分： <el-collapse v-model="activeNames" style="border:none;margin-left:30px;"> <el-collapse-item name="1"> <template slot="title"> <p class="title">运行信息</p> </template&

怎么修改elementui默认样式仅当前页面生效

09-08

在当前页面生效修改 ElementUI 默认样式的方法是在当前页面的 CSS 样式文件中定义覆盖 ElementUI 组件的样式，比如你可以这样实现： 1. 在当前页面的 CSS 样式文件中引入 ElementUI 样式文件： ``` @import "~...