el-table 背景色和hover 样式修改

朴灿烈づ我的快乐病毒、 2022-12-31 06:26 252阅读 0赞

/deep/ .el-table,

.el-table\_\_expanded-cell \{

background-color: transparent;

/deep/.el-table th \{

background: rgba(70, 114, 255, 0.2) !important;

/deep/.el-table tr \{

background-color: rgba(15, 19, 30, 0.8) !important;

/deep/.el-table--enable-row-hover .el-table\_\_body tr:hover > td \{

background-color: \#212e3e !important;

初衷

[element ui][]官方封装好的 [el-table][] 组件， 好用是挺好用的，但不可避免的是默认的样式并不一定能满足实际开发过程中的需要，那就自己动用五姑娘吧。

入坑

一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改，如：  
<template>

<el-table header-cell-style="border-color: #868686; color: #606266"></el-table>

另外也可以使用 header-cell-class-name 和 cell-class-name 属性，如：  
<template>

<el-table cell-class-name="cell-class-name"></el-table>

<style>

.cell-class-name {
      border-color: #868686;
    }

问题

使用 header-cell-style和 cell-style 属性虽然能正常显示效果，但会抛出异常，反正我是没整明白，另外，header-cell-class-name 设置覆盖样式，无法生效，而 cell-class-name 则可以。

![6dd68b58d6668eab6b15b8c770a64cdb.png][]

该类型检查失败

解决方法

设置 el-table 属性`:cell-style="tableCellStyle"`和`:header-cell-style="tableHeaderCellStyle"`，通过 js 代码修改样式。  
<template>里添加：

<el-table
      :data="tableData"
      :v-loading="tableLoading"
      row-key="id"
      height="100%"
      highlight-current-row
      show-summary
      border
      fit
      style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle"
    >
      <el-table-column fixed type="index" width="50"></el-table-column>
    </el-table>

// 修改 table cell边框的背景色
    tableCellStyle () {
       return 'border-color: #868686;'
     },
    // 修改 table header cell的背景色
    tableHeaderCellStyle () {
      return 'border-color: #868686; color: #606266;'
    }

[element ui]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[el-table]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Ftable
[6dd68b58d6668eab6b15b8c770a64cdb.png]: /images/20221120/a1fe61d358b0413386fa287c494f77aa.png