自定义element-ui的table表格头header字体颜色及背景色

最新推荐文章于 2024-06-15 11:58:33 发布

原创最新推荐文章于 2024-06-15 11:58:33 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 Element UI 框架自定义表格头部的样式，包括背景颜色和文字颜色，通过 Vue.js 的方法实现对特定列头的个性化设置。

<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      stripe
      :header-cell-style="tableHeaderColor" //加入这行
    >

methods: {
// 修改table header的背景色
    tableHeaderColor(row) {
      if (row.column.label === 'label名称') {
        return 'background-color: #eff7ff;color:#ff0000';
      } else {
        return 'background-color: #eff7ff'
      }
    }
  }