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

作者：羊村懒王 | 2024-02-19 08:55:52

踩

element puls修改表格颜色

表格透明，字体为白色：
在这里插入图片描述
代码如下：
引入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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/113804