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

最新推荐文章于 2024-08-01 14:08:25 发布

原创最新推荐文章于 2024-08-01 14:08:25 发布 · 8.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

博客围绕Element UI的el-table组件样式修改展开。因官方组件默认样式难满足实际开发，作者尝试多种修改方式，如参考官方文档用header-cell-style等属性，但使用这些属性出现显示异常、样式无法生效等问题，最后给出通过设置el-table属性和用js代码修改样式的解决方法。

/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 则可以。

该类型检查失败

解决方法

设置 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;'
}