设置el-table的表格头部样式和每一行样式

最新推荐文章于 2024-05-27 12:01:55 发布

揣手手了

最新推荐文章于 2024-05-27 12:01:55 发布

阅读量7.2k

点赞数 3

分类专栏： el-table element-ui

本文链接：https://blog.youkuaiyun.com/weixin_43412413/article/details/99442088

版权

element-ui 同时被 2 个专栏收录

9 篇文章

订阅专栏

el-table

4 篇文章

订阅专栏

本文详细介绍了如何使用 Element UI 的 el-table 组件自定义表格样式，包括如何设置行和表头的背景图片，调整 hover 和当前行的背景色。通过 CSS 和 Vue 方法实现了奇数行和偶数行的不同背景效果。

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

<el-table
   :data="jxpData"
   :show-header="true"
   :row-style="tableRowStyle"
   :header-cell-style="tableHeaderStyle"
   max-height="300"
   style="width: 100%; overflow-y:auto;"
   >

methods: {
  tableRowStyle({row, rowIndex}) {
    return `background-color: #004346;
            color: #fff;
           `
  },
  tableHeaderStyle({row, column, rowIndex, columnIndex}) {
    if (rowIndex === 0) {
      return `
        background-color: #004346;
        color: #fff;
        height: 30px!important;
        font-size: 14px;
        `
    }
  }
 }

如果需要给表头和每一行设置背景图片而不是背景色，需要先清除默认的背景颜色
代码如下:

/*将表格每一行的背景色去掉*/
.el-table, .el-table__expanded-cell, .el-table tr {
   background-color: transparent;
}

// 奇数行和偶数行设置不同的背景背景图片
methods: {
  tableRowStyle({row, rowIndex}) {
    if (rowIndex % 2 == 0) {
       return `background: url("./img/tr.png") no-repeat;
               background-size: 100% 100%;
               color: #fff;
               border: none;
               background-position: left center;
               `
    }else {
       return `background: url("./img/tr_other.png") no-repeat;
               background-size: 20px 100%;
               color: #fff;
               border: none;
               background-position: 13px center;
               `
   }
  }
}

/*表格每一行被hover时的样式设置*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(141, 214, 217, .4);
}

/*表格某一行被点击时的样式*/
.el-table__body tr.current-row>td {
    background-color: rgba(141, 214, 217, .4)
}