要实现Vue中el-table
的背景透明,可以通过以下步骤进行设置:
-
给
el-table
添加一个class名,用来标记样式。 -
在CSS中设置该class的样式为透明度为0即可。
-
如果要保持表格内的内容不透明,可以单独设置表格内容的颜色为不透明的黑色。
下面通过两个示例来进一步说明。
示例一:给el-table添加class名设置样式
HTML代码
<template>
<div>
<el-table :data="tableData" class="table-transparent">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
CSS代码
.table-transparent {
background-color: transparent !important;
}
.table-transparent .el-table__body,
.table-transparent .el-table__header {
background-color: rgba(0, 0, 0, 0.5);
}
.table-transparent .el-table__body tr td {
color: #000;
background-color: rgba(255, 255, 255, 0.9);
}
在模板中,给el-table
添加了一个class名table-transparent
。在CSS中,设置了该class的背景颜色为透明。同时,为了保持表格中内容不透明,设置了表格内容的颜色为黑色,背景颜色为半透明的白色。
示例二:使用scoped样式设置el-table样式
HTML代码
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
CSS代码
<style scoped>
.el-table__body,
.el-table__header {
background-color: rgba(0, 0, 0, 0.5) !important;
}
.el-table__body tr td {
color: #000;
background-color: rgba(255, 255, 255, 0.9);
}
</style>
在CSS中,使用了scoped样式,避免了样式冲突。设置了el-table__body
和el-table__header
的背景颜色为半透明的黑色,设置了表格内容的颜色为黑色,背景颜色为半透明的白色。
通过以上两种方式,我们就可以实现Vue中el-table
的背景透明样式。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue如何设置el-table背景透明样式 - Python技术站