element-ui中修改 el-table 的样式，头部样式的修改（附效果图）

最新推荐文章于 2024-12-10 14:11:10 发布

原创最新推荐文章于 2024-12-10 14:11:10 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #vue.js #微信

Vue 同时被 2 个专栏收录

38 篇文章

订阅专栏

element-ui

14 篇文章

订阅专栏

本文介绍了如何在 element-ui 的 el-table 中修改表格的头部header样式和表格行(tr)样式，提供了具体的实现代码，并展示了实际效果。

element-ui 中 el-table 的样式修改

头部header部分，以及表格行（tr）的样式修改

在这里插入图片描述

实现样式对应的代码：

<el-table
   :data="tableData"
   :header-cell-style="tableHeaderStyle"
   :row-style="rowClass"       
    class="table_box">
</el-table>

// 相对应的方法
methods: {
   tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
     if (rowIndex === 0) {
       return `
       background-color: #051248;
       color: #fff;
       `;
     }
   },
   rowClass(row) {
     if ((row.rowIndex + 1) % 2 == 0) {
       return { background: "#0F235D", color: "#B8C0EA" };
     } else {
       return { background: "#051248", color: "#B8C0EA" };
     }
   },
}