改变表格颜色

::v-deep {
.el-table .light_row {
--el-table-tr-bg-color: #011f62;
height: 3.2rem;
color: #fff;
}

.el-table .deep_row {
--el-table-tr-bg-color: #011550;
height: 4.8rem;
color: #fff;
}

.el-table {
tbody tr:hover > td {
background-color: #05193e !important;
}
}

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
border-bottom: none;
}
.el-table__empty-block{
background-color: #011550;
}
}

------------------------------------------
toggleRowClassName({row, rowIndex}) {
if (rowIndex % 2 == 1) {
return 'deep_row'
} else {
return 'light_row'
}
},
-----------------------
<el-table :data="tableData" :header-cell-style="{background:'#011550',color:'#5c8aaf'}"
:row-class-name="toggleRowClassName" align="center"
max-height="355px" style="width: 376px">

<el-table-column label="学院" prop="deptName" width="180"/>
<el-table-column label="实训室数量" prop="roomCount"/>
<el-table-column label="占比" prop="ratio">
<template #default="scope">
<div class="rate">
{{ scope.row.ratio }}
</div>
</template>
</el-table-column>
</el-table>
posted @   士广  阅读(116)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示