elementui 更改 el-table 表头样式及修改el-table表格边框的注意事项

效果图

 

初衷

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

入坑

一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改,如:


另外也可以使用 header-cell-class-name 和 cell-class-name 属性,如:


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 代码修改样式。
里添加:


  

 

你可能感兴趣的:(element-ui使用及修改,elementui,vue.js,javascript)