el-table样式总结—持续更新-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43258184/article/details/123702918

本文总结了Element UI中el-table组件的样式定制技巧，包括如何为特定表头添加样式、如何使用span-method进行单元格合并，以及如何为特定表格单元格设置样式。通过示例代码，展示了rowIndex和columnIndex的用法，以及返回css样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.el-table标签的header-cell-style给指定的表头添加样式

 :header-cell-style="getRowClass"

 getRowClass ({ row, column, rowIndex, columnIndex }) { 
        
               if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1))) {
                    return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';
                } else {
                    return '';
                }
            
            }

rowIndex===0是第一行，columnIndex===0是第一列。 return ' css样式 '

2. el-table标签的:span-method合并单元格，不包含表头

:span-method="rowSpanMethod"

if里面可以自定义，return[0,0]表示不合并。return[行数，列数]

   rowSpanMethod({ row, column, rowIndex, columnIndex }) {
            /**
             * 表格合并
             * row 表格每一行的数据
             * column 表格每一列的数据
             * rowIndex 表格的行索引,不包括表头,从0开始
             * columnIndex 表格的列索引,从0开始
             */
            if (this.areaShow || this.teamShow) {
                if (columnIndex === 0) {
                    if (rowIndex % areaAndTeamRowCount === 0) { 
                        return [areaAndTeamRowCount, 1];
                    } else {
                        return [0, 0];
                    }
                }
            }
        }

3. el-table标签的:cell-style给特定表格添加样式，return cellStyle + ' css样式'

  :cell-style="cellStyle"

  cellStyle({ row, column, rowIndex, columnIndex }) {
       if (diffRow === 0 && rowIndex % temCount === 0) {
                if (cellValue < this.standardParameter.stoveRunCount) {
                    return cellStyle + 'color:#f00;';
                }
           }
  }