Elementui changes the el-table header style and the precautions for modifying the el-table table border

renderings

 

original intention

The el-table component officially packaged by element ui is very easy to use, but it is inevitable that the default style may not meet the needs of the actual development process, so use the five girls yourself.

into the pit

One is to refer to the header -cell-style and cell-style attributes of el-table in the official document  to modify, such as:

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

You can also use the header-cell-class-name and cell-class-name attributes, such as:

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

style：

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

question

Although using the header-cell-style and cell-style attributes can display the effect normally, it will throw an exception. Anyway, I don’t understand it. In addition, the header-cell-class-name setting override style cannot take effect, and the cell-class -name does.

该类型检查失败

Solution

Set el-table attributes: cell-style="tableCellStyle" and :header-cell-style="tableHeaderCellStyle", modify the style through js code.
add in:

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

 Add in <script> => methods method:

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

Reprinted from the original text

http://t.csdn.cn/z8Eyehttp://t.csdn.cn/z8Eye