el-table有哪些常用的主题

以下是 el-table 常用的主题样式配置方案，涵盖表头、行样式、交互效果等核心主题元素，结合 Element UI 的属性和 CSS 覆盖实现：

📌 一、基础主题设置

1. 表头样式

   • 背景色与文字：通过 header-cell-style 或 header-cell-class-name 自定义表头主题。

     <!-- 属性直接设置 -->
     <el-table :header-cell-style="{ background: '#047ab1', color: '#fff', fontWeight: '400' }">
     

     <!-- 类名回调（支持复杂条件） -->
     <el-table :header-cell-class-name="headerStyle">
     <script>
     methods: {
       headerStyle({ columnIndex }) {
         return columnIndex < 4 ? 'lefBackg' : 'rigBackg';
       }
     }
     </script>
     <style>
     ::v-deep .lefBackg { background: #8AABFB!important; }
     ::v-deep .rigBackg { background: #4CBBEA!important; }
     </style>
     

2. 表格整体背景与边框

   • 透明背景：适配深色主题。

     ::v-deep .el-table, ::v-deep .el-table__expanded-cell {
       background-color: transparent !important;
     }
     

   • 无边框设计：

     ::v-deep .el-table td, ::v-deep .el-table th, ::v-deep .el-table::before {
       border: none !important; /* 隐藏所有边框 */
     }
     

🎨 二、行样式主题

1. 斑马纹（隔行变色）

   • 启用内置斑马纹：

     <el-table stripe :data="tableData"> <!-- 自动生成交替背景色 -->
     

   • 自定义斑马纹颜色：

     /* 全局覆盖斑马纹颜色 */
     ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
       background-color: #f0f9ff !important; /* 浅蓝色 */
     }
     

   • 手动实现高级斑马纹（如渐变背景）：

     <el-table :row-class-name="setRowClassName">
     <script>
     methods: {
       setRowClassName({ rowIndex }) {
         return rowIndex % 2 === 0 ? 'bc1' : 'bc2';
       }
     }
     </script>
     <style>
     ::v-deep .bc1 { background: radial-gradient(circle, rgba(61,192,237,0.13) 9%, transparent 120%)!important; }
     ::v-deep .bc2 { background: radial-gradient(circle, rgba(52,193,168,0.26) 9%, transparent 120%)!important; }
     </style>
     

2. 行高亮与状态标记

   • 当前行高亮：

     <el-table highlight-current-row @current-change="handleCurrentChange">
     <script>
     methods: {
       rowClass({ row }) {
         return this.currentRowId === row.id ? 'highlight-row' : '';
       }
     }
     </script>
     <style>
     ::v-deep .el-table__body tr.current-row > td {
       background-color: #caf982 !important; /* 亮绿色高亮 */
     }
     </style>
     

   • 条件标记行（如禁用状态）：

     <el-table :row-style="tableRowStyle">
     <script>
     methods: {
       tableRowStyle({ row }) {
         return row.disabled ? { background: 'rgba(243,243,243,1)' } : {};
       }
     }
     </script>
     

✨ 三、交互效果主题

1. 悬停效果

   • 禁用默认悬停背景：

     ::v-deep .el-table__body tr:hover > td {
       background-color: transparent !important; /* 完全透明 */
     }
     

   • 自定义悬停特效：

     ::v-deep .el-table tbody tr:hover > td {
       background-color: #065b759e !important;
       border-top: 2px solid #22b0e8;  /* 顶部光效边框 */
       border-bottom: 2px solid #22b0e8; /* 底部光效边框 */
     }
     

2. 滚动条美化

   • 隐藏滚动条：

     ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
       display: none; /* Chrome/Safari */
     }
     

   • 渐变滚动条：

     ::-webkit-scrollbar-thumb {
       background: linear-gradient(to right, #0299E2, #02E4DC);
       border-radius: 6px;
     }
     

⚙️ 四、特殊主题效果

1. 单元格合并

   • 使用 span-method 实现 SKU 表格的跨行合并：

     <el-table :span-method="objectSpanMethod">
     <script>
     methods: {
       objectSpanMethod({ rowIndex, columnIndex }) {
         if (columnIndex === 0) {
           return { rowspan: 2, colspan: 1 }; /* 第一列占两行 */
         }
       }
     }
     </script>
     

2. 内嵌组件样式统一

   • 在表格列中嵌入 el-switch、el-select 等组件时，需同步主题色：

     <el-table-column label="状态">
       <template slot-scope="scope">
         <el-switch v-model="scope.row.state" active-color="#13ce66" />
       </template>
     </el-table-column>
     

💎 总结：主题配置核心要点

1. 属性优先：

   • 内置属性（如 stripe、highlight-current-row）快速启用基础主题。

2. CSS 深度覆盖：

   • 使用 ::v-deep（Vue3）或 /deep/（Vue2）覆盖 Element 默认样式。

3. 动态样式回调：

   • row-style、header-cell-style 等支持函数式条件渲染。

4. 全局主题统一：

   • 在全局 CSS 中定义斑马纹、表头类名，避免重复代码。

更多实践案例可参考：表头样式详解｜斑马纹全局配置。