前言
项目目前根据UI设计,出了几种配色的element-ui中table、pagination的样式,也不是整体换肤功能,就想着通过给全局class类名,来操作table下面的所有样式,上代码
// src文件夹下创建style文件夹,style下面创建scss文件夹和index.scss文件
// scss下面新建table.scss和pagination.scss文件夹
// 绑定在#app上,因为这里使用:deep加重权级在打包后发布线上版本有时会出现问题
// 在table.scss中
#app {
// 灰色table
.dark-table {
.el-table {
color: #dddddd;
background-color: rgba(37, 37, 37, 0.5);
border-radius: 6px;
font-size: 12px;
tr {
color: #dddddd;
background-color: rgba(37, 37, 37, 0.5);
}
tr:hover > td {
background-color: #383844 !important;
}
tr.current-row > td {
background-color: #383844 !important;
}
th {
color: #dddddd;
font-weight: normal;
background-color: rgba(37, 37, 37, 0.5);
border-bottom: 1px solid #333333;
}
td {
border-bottom: 1px solid #333333;
}
.el-table__inner-wrapper::before {
height: 0;
}
}
}
// 透明table
.transparent-table {
.el-table {
color: #dddddd;
background-color: rgba(37, 37, 37, 0.5);
border-radius: 6px;
font-size: 12px;
tr {
color: #dddddd;
background-color: transparent;
}
tr:hover > td {
background-color: #383844 !important;
// background-color: transparent !important;
}
tr.current-row > td {
// background-color: #383844 !important;
background-color: transparent !important;
}
th {
color: #dddddd;
font-weight: normal;
background-color: rgba(37, 37, 37, 0.5);
border-bottom: 1px solid #333333;
}
td {
border-bottom: 1px solid #333333;
}
.el-table__inner-wrapper::before {
height: 0;
}
}
}
}
// 在pagination.scss中
#app {
// 灰色翻页器
.dark-pagination {
.el-pagination {
.btn-prev {
background-color: #333333;
.el-icon {
font-weight: bolder;
font-size: 18px;
}
}
.btn-prev:hover:not([disabled]) {
border: 1px solid #6e6ef7;
}
.btn-next {
background-color: #333333;
.el-icon {
font-weight: bolder;
font-size: 18px;
}
}
.btn-next:hover:not([disabled]) {
border: 1px solid #6e6ef7;
}
.el-pager {
li {
background-color: #333333;
color: #c4c4c4;
}
li:not(.is-disabled).is-active {
background-color: #333333;
border: 1px solid #6e6ef7;
color: #6e6ef7;
}
}
}
}
// 透明翻页器
.transparent-pagination {
.el-pagination {
.btn-prev {
background-color: rgba(37, 37, 37, 0.5);
.el-icon {
font-weight: bolder;
font-size: 18px;
}
}
.btn-prev:hover:not([disabled]) {
border: 1px solid #18BAE3;
}
.btn-next {
background-color: rgba(37, 37, 37, 0.5);
.el-icon {
font-weight: bolder;
font-size: 18px;
}
}
.btn-next:hover:not([disabled]) {
border: 1px solid #18BAE3;
}
.el-pager {
li {
background-color: rgba(37, 37, 37, 0.5);
color: #c4c4c4;
}
li:not(.is-disabled).is-active {
background-color: rgba(37, 37, 37, 0.5);
border: 1px solid #18BAE3;
color: #18BAE3;
}
}
}
}
}
// 在index.scss中引入
@import "./scss/pagination.scss";
@import "./scss/table.scss";
// 在main.js中引入index.scss
import './style/index.scss' // 全局样式
// 项目中使用全局类名样式
<div class="transparent-table transparent-pagination">
<el-table :data="analyseList" @row-click="handleRowClick">
<el-table-column prop="createTime" :label="t('table.time')"></el-table-column>
<el-table-column prop="customerName" :label="t('table.customerName')"></el-table-column>
<el-table-column prop="code" :label="t('table.code')"></el-table-column>
<el-table-column prop="name" :label="t('table.analyseData')"></el-table-column>
<el-table-column prop="type" :label="t('table.analyseType')"></el-table-column>
<el-table-column prop="operation" :label="t('table.operation')"></el-table-column>
<el-table-column prop="remark" :label="t('table.remark')"></el-table-column>
</el-table>
</div>
这样就使用成功了,想实现不同的样式只需要给不同的类目即可,最后展示文件夹和效果图