使用vue深度选择器修改ElementUI组件内样式的示例代码

例子：el-collapse标签修改子组件样式

在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

<style lang="scss" scoped>
.collapse1 {
  /deep/ .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  /deep/ .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

scss使用：

<style lang="scss" scoped>
.collapse1 {
  ::v-deep .el-collapse-item__content {
    padding: 0px 5%;
    background: #fff;
  }

  ::v-deep .el-collapse-item__header {
    padding: 0px 5%;
    background: #fff;
  }
}
 </style>

注意：在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep

<-- 放上去就行了 -->
　　　　<el-collapse class="collapse1" v-model="...">
          <el-collapse-item v-for="(item,index) in ..." :name="index">
            <template slot="title">
              {{ item.... }}{{ index }}
            </template>
          </el-collapse-item>
        </el-collapse>

注：el-collapse-item__header等类名在浏览器开发者工具中的Elements找到

vue使用element ui

第一步：

npm install element-ui --save

第二步：

主要代码（安装完成后在 main.js 添加全局引用）：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

第三步：

element ui官网找组件引用。

到此这篇关于使用vue深度选择器修改ElementUI组件内样式的文章就介绍到这了,更多相关vue修改ElementUI组件内样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+element DatePicker实现日期选择器封装

    目录 前言 效果 一.封装组件 创建linechart linechart: 二.页面中使用 workBench: 总结 前言 今天封装了一个DatePicker日期选择器,发现带快捷选择的不太好封装,我需要在不同的地方快捷选择不同的时间,并且快捷显示的时间是从昨天开始,在网上找了一圈都没找到便自己写了一个记录一下. 效果 今天是2022年1月3日,最近一周便是从昨天开始往前推一周 我这里只有两种显示快捷选择时间的样式,可以根据具体需求无限加,达到我想要在不同的选择器中显示不同的快捷时间选择的需

  • VUE-ElementUI 时间区间选择器的使用

    VUE-ElementUI 时间区间选择器的使用

    目录 VUE-ElementUI 时间区间选择器 一.单个输入框 二.两个输入框 elementUI-日期选择器(两个框 限制选择范围.快捷键选择) 两个日期框选择 VUE-ElementUI 时间区间选择器 官方文档中使用picker-options属性来限制可选择的日期 一.单个输入框 <el-date-picker        v-model="value1"        type="date"        placeholder="选择

  • vue ElementUI级联选择器回显问题解决

    目录 1. 分析问题 2. 解决问题 1. 分析问题 [问题描述] 使用 ElementUI 的 Cascader 级联选择器组件,如果使用了懒加载和动态加载数据会导致,在v-model中的数据据重新放到 Cascader 级联组建后,会出现数据不回显的问题. [原因分析] 在级联组件中虽然在v-model中重新传入选中的数据,但采用了懒加载+远程数据的方式构建选项数据,此时级联组件的结构数据并未生成,此时仅有选中后的数据而没有选项数据,因此导致了级联选择器没有数据可供显示,也就导致了数据不回显

  • Vue+ElementUI 中级联选择器Bug问题的解决

    最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~ 不多说废话,直接上问题: ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题: 最后一级会多出来一个级联,这种体验便造成了很不好的感觉. 解决办法: 将获取这些级联的数据作为参数

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    详解基于Vue cli开发修改外部组件Vant默认样式

    前言 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容,下面案例可供参考 一.Less 因为Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,可以通过替换样式变量即可定制你自己需要的主题. 给你的项目配置less: npm install less --save-dev npm install less-loader --s

  • vue路由事件beforeRouteLeave及组件内定时器的清除方法

    背景 之前在做ADTS项目的时候,首页是一个实时监测的页面,需要每隔5秒更新一次数据,而业务逻辑上的需要先请求告警列表的接口的,从告警列表中拿到数据再去获取其他的数据,所以我在获取告警列表的方法中增加了一个定时器. 最开始我是将定时器声明在组件内部的(由于页面不多,数据关联也不太强,所以项目中没有使用store进行数据管理),后来清除的时候发现无法清除,后来索性声明到window下了.然后在组件内部写了如下代码: 发现也没能将定时器清除,后来走debug发现根本就没有进到这个方法中去,然后就去问

  • Vue中正确使用Element-UI组件的方法实例

    一.CDN 目前可以通过 unpkg.com/element-ui获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unp

  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • vue.js 父向子组件传参的实例代码

    vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • vue项目中仿element-ui弹框效果的实例代码

    vue项目中仿element-ui弹框效果的实例代码

    最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式. 路由示例 export const routes = [ { path: "/", redirect: "

  • vue.js  父向子组件传参的实例代码

    vue.js  父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

  • Vue后台实现点击图片放大功能的示例代码

    目录 需求 代码 父组件 子组件 dom.js util.js types.js 需求 点击小图可以放大,放大后,通过手势等比例放大缩小.左右切换图.旋转.关闭.由于element-ui版本较低不支持使用图片放大的image组件. 代码 父组件 <template> <div> <!-- 放大图 --> <el-image-viewer v-if="showImg" :on-close="closeViewer" :src=

随机推荐