vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~

前言

在用vue框架进行开发的时候，使用现成的UI组件库是十分方便的，但方便归方便，现成的它仍然不能满足我们所有的需求，为了达到预期的效果，我们仍需加以修改其样式，这里我采用的是将重写样式放入一个less文件中，再在需要修改样式的组件里引入从而达到修改该组件样式的效果。

一：新建一个放重写样式的less文件

二：重写样式

这里我修改的是表格的背景色，边框色，以及悬浮背景色

/*表格样式*/
.el-table{background-color: rgba(0,0,0,0.25);color: #FFFFFF;border-color: rgb(128,128,128);&:before,*:before{height: 0px!important;}th,tr,td,div{background-color: rgba(0,0,0,0);}th>.cell{color: #FFFFFF;}*{border-color: rgb(128,128,128) !important;}.el-table__header-wrapper{tr{background-color: rgba(0,0,0,0.25);th{color: #FFFFFF;background-color: rgba(0,0,0,0.4);}}}.el-table__body-wrapper{tr{background-color: rgba(0,0,0,0.1);}.el-table__empty-text{color: white;}}//修改带操作的表格背景色.el-table__row{&:hover{td{background-color: rgba(0,0,0,0.3) !important;}}}//修改固定右边操作的表格背景悬浮色.hover-row{td{background-color: rgba(0,0,0,0.3) !important;}}
}

三：vue组件引入重写样式

这里我采取的是@import引入

效果图

vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~相关推荐

修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速的搭建网站,提高开发的效率 ElementUI PC端 MintUI 移动端一.全部引入安装element-ui cnp ...
win10快速搭建vue开发环境并使用element ui
1,环境 1.1 node.js安装下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 选安装目录进行安装(安装过程就是全程next,注意不要取消自动 ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...

vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~

前言

一：新建一个放重写样式的less文件

二：重写样式

三：vue组件引入重写样式

效果图

vue引入重写样式修改Element-UI表格背景色以及悬浮背景色，带操作的表格也可以修改呦~相关推荐

最新文章

热门文章