两种方式实现element-ui组件的样式

方案1:重置的公共组件样式的写法如下

然后在main.js中引入

import '@/assets/css/element.css'
 
方案2:每个.vue文件 - 组件的细节调整
<template>
 // 给根元素绑定一个id
    <div id="home">
    </div>
</template>
 
 在style标签里面分两种情况 参照链接地址:https://www.cnblogs.com/goloving/p/9119265.html
 
第一种 带scoped(dom和css具有hash值,也就是唯一标识)
 
因为scoped属性使得元素带有hash值,又因为element-ui组件的dom是动态生成的,所以css的hash值匹配不到dom元素上,所以使用>>>或者/deep/
 
(css的写法)
<style scoped>
#home  >>>  .el-button {
color:red;
}
</style>
 
(less的写法)
<style lang="less" scoped>
#about{
         /deep/ .el-button{
               color: violet;
               background: darkblue;
        }
}
</style>
 
第二种 不带scoped(和平常的写法一样)
 
<style>
#home   .el-button {
color:red;
}
</style>
 
 

Vue+element-ui 重置组件样式的写法的更多相关文章

  1. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  2. vue+element UI以组件递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. vue+element ui 表格自定义样式溢出隐藏

    样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...

  4. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  5. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  9. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. 「Android」GreenDao

    译文 版本:greenDAO 3.2.2 官网:http://greenrobot.org/greendao/ GitHub:https://github.com/greenrobot/greenDA ...

  2. (办公)eclipse连接github cannot open git-upload-pack(git-receive-pack)

    原文地址:https://blog.csdn.net/royal__moon/article/details/79427431 打开eclipse安装目录下的eclipse.ini添加一句:-Dhtt ...

  3. AIOps背景/所应具备技术能力分析(上)

    本文篇幅较长,分为上,中,下,三个部分进行连载.内容分别为:AIOps 背景/所应具备技术能力分析(上),AIOps 常见的误解(中),挑战及建议(下). 前言 我大概是 5,6 年前开始接触 ITO ...

  4. ERP服务启动后无法连接数据库的解决方法

    请安照步骤一步一步走,一个方法一个方法试. 方法一: 第一步,退出ERP 第二步,卸载sql服务,操作方法如下(win+R—输入cmd—输入sc delete mysql_sl 回车键) 第三步,重启 ...

  5. 获取spring applicationcontext数据连接connection

    ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml"); ...

  6. 极致精简的webservice集成例子

    极致精简的webservice例子   看了网上好多关于webservice的例子,基本上对初学者来说都是模棱两可云里雾里,现在,我将网上关于webservice的讲解提炼出来,通过一个最简单使用并且 ...

  7. UICollectionView 基础

    在iOS开发中经常会用到UICollectionView,和UITableView同样即成UIScrollView 但是操作起来比UITableVIew要麻烦一些 ,有些地方需要注意,一下是UICol ...

  8. 教你用Python Jupyter Notebook 制作代码分享 PPT

    PPT 是个强大的工具,但是笔者的 PPT 制作技术不咋地,所以之前的分享习惯使用 Jupyter Notebook + RISE,这样使用简单的 markdown 格式加上代码就足够做一次代码分享了 ...

  9. JAVA API的下载和中文查看API

    一.JAVA API的下载 1.1 JAVA由SUN公司开发,2006年SUN公司宣布将Java技术作为免费软件对外发布,标志着JAVA的公开免费.2009年,SUN公司被甲骨文公司收购,因此我们现在 ...

  10. wordpress安装后访问博客只显示文字的解决办法

    按着网上的教程,买了腾讯云服务器,上面的镜像已经安装好WordPress了.但是发现并不像网上十分钟搭建个人站点等的写的那么简单.遇到了一些问题,下面来详细讲一讲. 首先是用ip地址不能直接访问服务器 ...