vue3 element-plus表格修改背景色
·
<el-table
:data="tableData"
style="width: 100%;margin-top: 15px"
height="240px"
:header-cell-style="headerCellStyle"
:row-class-name="tableRowClassName">
<el-table-column prop="name" label="TOP排名" align="center">
<template #default="{ $index }">
Top{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="部门" />
<el-table-column prop="participation" label="人效" />
</el-table>
``
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
return {
'background': 'rgba(34, 33, 34, .95) !important',
'color': '#FFFFFF !important',
'font-weight': 'bold !important'
}
}
const tableRowClassName = ({row, rowIndex}) => {
if (rowIndex % 2 == 1) {
return 'warning-row'
}
return 'success-row'
}
css
```html
.tables{
:deep(.el-table) {
// 表格整体背景色
--el-table-bg-color: rgba(33, 35, 41, 0.8);
// 表格头部背景色
--el-table-header-bg-color: rgba(33, 35, 41, 0.9) !important;
// 表格行背景色
--el-table-row-bg-color: rgba(33, 35, 41, 0.5);
// 表格行悬浮背景色
--el-table-row-hover-bg-color: rgba(50, 52, 58, 0.8);
// 表格边框颜色
--el-table-border-color: rgba(144, 147, 153, 0.2);
// 表格文本颜色
--el-table-text-color: #FFFFFF;
// 表头文本颜色
--el-table-header-text-color: #FFFFFF;
.warning-row {
--el-table-tr-bg-color: rgba(45, 45, 46, .5);
}
.success-row {
--el-table-tr-bg-color: rgba(34, 33, 34, .5);
}
}
}
更多推荐


所有评论(0)