<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);
            }
        }
    }

更多推荐