修改elementUI 表格透明度，字体颜色

表格透明，字体为白色：

代码如下：
引入vue.js ，element.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>.el-table,.el-table__expanded-cell {background-color: transparent !important;}/* 表格内背景颜色 */.el-table th,.el-table tr,.el-table td {background-color: transparent !important;}/* 删除表格下横线 */.table-wrapper  .el-table::before {left: 0;bottom: 0;width: 100%;height: 0px;}.table-wrapper  .el-table td .cell {color: #fff !important;}.table-wrapper  .el-table th .cell {color: #fff !important;}/* 删除单元格底部横线 */.table-wrapper  .el-table td {border-bottom: 0px solid #dfe6ec !important;}.table-wrapper  .el-table th {border-bottom: 0px solid #dfe6ec !important;}</style>
</head>
<body><div id="app"><template><div class="table-wrapper"><el-table :data="tableData" style="width: 100%;color: #ffffff;":header-cell-style="{background:'transparent',color:'#fff'}"><el-table-column prop="name" label="序号" width="50">1</el-table-column><el-table-column prop="name" label="区县" width="80"></el-table-column><el-table-column prop="name" label="用户编号" width="120"></el-table-column><el-table-column prop="name" label="企业名称" width="120"></el-table-column><el-table-column prop="name" label="行业类型" width="80"></el-table-column><el-table-column prop="name" label="统计周期" width="110"></el-table-column><el-table-column prop="name" label="碳排放量" width="80"></el-table-column><el-table-column prop="name" label="碳减排量" width="80"></el-table-column></el-table></div></template></div>
<body>
<script>// 该vue对象，绑定了页面中id是app的那个divnew Vue({el: '#app', //element// 数据哪里来？data: {tableData: [{date: '2016-05-02',name: '兰山',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '河东',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '罗庄',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '市中',address: '上海市普陀区金沙江路 1516 弄'}]}
</script>

修改elementUI 表格透明度，字体颜色相关推荐

修改Element-ui表格样式
修改表格头部背景 .el-table th{background: #f00;} 修改表格行背景 .el-table tr{background: #f00;} 修改斑马线表格的背景 .el-tabl ...
widows下如何修改Visual Studio2017的字体颜色
widows下如何修改Visual Studio2017的字体颜色 1 打开一个工程,点击"工具"栏下的"选项" 2 进入"选项"界面,点击 ...
VsCode使用笔记【1】Ubuntu+vscode+Monokai+修改主题中的字体颜色
VsCode使用笔记[1]Ubuntu+vscode+Monokai+修改主题中的字体颜色 ## 标题一.找到标题主题位置 ubuntu中vscode默认安路径: 计算机-->usr--> ...
python3-xlwt-Excel设置表格基础(字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划线斜体字单元格对齐方式自动换行删除线超链接插入公式)
文章目录引入xlwt和创建workboos对象初始化样式和创建设置字体,赋值给style 保存文件自定义样式字体颜色背景颜色设置边框边框颜色冻结窗口字体大小字体高度字体加粗下划 ...
如何用PDF编辑器修改PDF文件的字体颜色
如何用PDF编辑器修改PDF文件的字体颜色呢?在工作中,PDF文件是一种很难修改的文件格式,甚至一些版本较低的阅读软件都无法打开PDF文件,如果我们想要编辑PDF文件,那就一定需要借助PDF编辑器对P ...
latex 改变table表格线条颜色，表格内字体颜色，表头Table. 颜色
1.表格线颜色正文中添加库 \usepackage{array} 表格下面用 \arrayrulecolor{blue} 2.表格内字体颜色:需要一格一格的内容分别使用 {\color ...
linux 修改用户登陆shell字体颜色和vim颜色字体设置
参考链接:https://blog.csdn.net/bt517840374/article/details/80004161 一.关于shell颜色设置 (当然也可以通过shell窗口的设置来设置字 ...
自定义element-ui的table字体颜色，及背景色
遇到一个需要根据报警级别来区分table数据的需求,一开始的想法是改变字体颜色,看了下ele文档,有个cell-style的属性,可以通过回调,返回样式.感觉so easy 那就来吧,直接上代码界面 ...
修改Linux命令行字体颜色（亲测有效）
最近在VMware里面安装CentOS7系统,发现命令行输入命令时,查询的内容与命令行都是白色混为一体,这使得查看很不舒服.最后网上查到设置字体颜色方法,具体步骤如下.(因为我已经修改过,我修改的是绿 ...
HTML中placeholder字体颜色,修改input中placeholder字体颜色方法
如上,input的placeholder属性我们无需修改,但是如果恰巧我们设置的背景色和placeholder默认颜色一样的话,尴尬的事情就发生了,很小的一个问题会耽误我们不少时间查找什么原因造成的. ...

修改elementUI 表格透明度，字体颜色

修改elementUI 表格透明度，字体颜色相关推荐

最新文章

热门文章