elementUI table組件border樣式的修改問題

初衷

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> 

<script> => methods方法里添加：

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

記錄大神筆記：如果有用，請給原作者一個贊！原鏈接：https://www.jianshu.com/p/e9b5e5c89420