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

最新推荐文章于 2024-06-25 09:28:36 发布

ljf8838

最新推荐文章于 2024-06-25 09:28:36 发布

阅读量2.5k

点赞数 1

分类专栏： web 文章标签： linux mysql mysql安装

本文链接：https://blog.csdn.net/ljf12138/article/details/123271941

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

表格透明，字体为白色：
在这里插入图片描述
代码如下：
引入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的那个div
    new 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>

ljf8838

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
修改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> <!-
复制链接

扫一扫