技術標籤：vue

/deep/.el-table,

.el-table__expanded-cell{

background-color:transparent;

}

/deep/.el-tableth{

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

}

/deep/.el-tabletr{

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

}

/deep/.el-table--enable-row-hover.el-table__bodytr: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 屬性，如：

<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"

<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>

<script> => methods方法裡新增：

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