element UI修改表格线颜色

element UI修改表格线颜色

原始官网效果（边框线不够明显）

最终效果（调整后）

全局文件css样式替换

<style>/**改变表头背景颜色 */.el-table thead.is-group th.el-table__cell{background: #dfdfe0;}/**改变边框颜色*/.el-table--border, .el-table--group{border: 1px solid #212020!important;}/**改变表格内竖线颜色*/.el-table--border  td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right: 1px solid #212020!important;color: #000000;}/**改变合并单元格中横线颜色 */.el-table--border th.el-table__cell{border-bottom: 1px solid #212020;color: #000000;}/**改变表格内常规行线颜色*/.el-table  td, .el-table th.is-leaf{border-bottom: 1px solid #212020!important;}</style>

单个文件css样式替换

<divclass="container"><el-table:data="softwareNumList"class="custom-table"style="width: 100%":default-sort="{ prop: 'groupStatistics', order: 'descending' }"stripe><el-table-columnlabel="测试安装数量统计表"align="center"><el-table-columnprop="softwareName"label="测试名称"width="350"show-overflow-tooltipalign="center":filters="dateFilters":filter-method="filterHandler"></el-table-column><el-table-columnprop="groupStatistics"label="测试统计"sortablealign="center"></el-table-column><el-table-columnlabel="园区统计"align="center"><el-table-columnprop="xxx1"label="测试1"sortablealign="center"></el-table-column><el-table-columnprop="xxx2"label="测试2"sortablealign="center"></el-table-column><el-table-columnprop="xxx3"label="测试3"sortablealign="center"></el-table-column><el-table-columnprop="xxx4"label="测试4"sortablealign="center"></el-table-column><el-table-columnprop="xxx5"label="测试5"sortablealign="center"></el-table-column><el-table-columnprop="xxx6"label="测试6"sortablealign="center"></el-table-column><el-table-columnprop="xxx7"label="测试7"sortablealign="center"></el-table-column></el-table-column></el-table-column></el-table></div>

<style>/**整体表格距离四周距离为20px */.container{padding: 20px;}/**改变表头背景颜色 ===》.custom-table指定上面的类id*/.custom-table.el-table thead.is-group th.el-table__cell{background: #dfdfe0;}/**改变边框颜色===》.custom-table指定上面的类id*/.custom-table.el-table--border, .custom-table.el-table--group{border: 1px solid #212020!important;}/**改变表格内竖线颜色===》.custom-table指定上面的类id*/.custom-table.el-table--border  td, .custom-table.el-table--border th, .custom-table.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right: 1px solid #212020!important;color: #000000;}/**改变合并单元格横线颜色===》.custom-table指定上面的类id */.custom-table.el-table--border th.el-table__cell{border-bottom: 1px solid #212020;color: #000000;}/**改变表格内常规行线颜色===》.custom-table指定上面的类id*/.custom-table.el-table  td, .custom-table.el-table th.is-leaf{border-bottom: 1px solid #212020!important;}</style>

单个文件，就是加入了类选择器，指定table加载样式